# CSS Hover Style for SVG Images (Custom Buttons)

**URL:** <https://forum.inductiveautomation.com/t/css-hover-style-for-svg-images-custom-buttons/69110>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [January 27, 2023, 6:53pm UTC](https://forum.inductiveautomation.com/t/css-hover-style-for-svg-images-custom-buttons/69110 "2023-01-27T18:53:28Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 27, 2023, 6:53pm UTC](https://forum.inductiveautomation.com/t/css-hover-style-for-svg-images-custom-buttons/69110/1 "2023-01-27T18:53:28Z")

</div>

Relatively new to CSS. Trying to create a style that applies the same effect as the buttons when the cursor is over the button (hand and boxShadow).

I located the `button.css` file in the install directory and tried to create a style following the layout of what I thought the relevant properties are for creating the hover effect, but I can't get it to work.

This is the button.css file:

```auto
.ia_button--primary,
.ia_button--secondary {
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--borderRadius);
    -webkit-border-radius: var(--borderRadius);
    cursor: pointer;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    transition-property: box-shadow, background-color;
}

.ia_button--primary:enabled:hover,
.ia_button--secondary:enabled:hover {
    box-shadow: var(--boxShadow2);
}

/* Primary button */

.ia_button--primary {
    background-color: var(--callToAction);
    border: var(--containerBorder);
    color: var(--neutral-10);
}

.ia_button--primary svg,
.ia_button--secondary svg {
    fill: currentColor;
}

.ia_button--primary:enabled:active {
    box-shadow: var(--boxShadow--inset);
    border: none;
}

.ia_button--primary--disabled {
    background-color: var(--callToAction--disabled);
    border: var(--border--disabled);
    color: var(--neutral-30);
    cursor: not-allowed;
}

/* Secondary button */

.ia_button--secondary {
    background-color: var(--neutral-10);
    border: var(--containerBorder);
    color: var(--neutral-90);
}

.ia_button--secondary:enabled:active {
    box-shadow: var(--boxShadow--inset);
}

.ia_button--secondary--disabled {
    background-color: var(--border--disabled);
    border: 1px solid var(--border--disabled);
    color: var(--neutral-30);
    cursor: not-allowed;
}

```

And the style I want to create:

```auto
.psc-Invisible_Button{
    cursor: pointer;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    transition-property: box-shadow, background-color;
    box-shadow: var(--boxShadow);
    border: var(--containerBorder);
}
.psc-Invisibe_Button:enabled:active{
    box-shadow: var(--boxShadow--inset);
    border: none;
}

```

Applying the style to say, an SVG, doesn't change anything.  
Will I be able to get this to work how I expect it to? Basically, I want to be able to apply this style to any object on the screen to make it more obvious to the user that they can click there.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [January 27, 2023, 7:08pm UTC](https://forum.inductiveautomation.com/t/css-hover-style-for-svg-images-custom-buttons/69110/2 "2023-01-27T19:08:25Z")

</div>

Here is a Perspective Style that I use to create a border, feel free to change to suit your needs, or just use for inspiration.  
[Device-Hover.zip](https://forum.inductiveautomation.com/uploads/short-url/sWVqPG4paPJDLd0SpJs32us8qHa.zip) (1.1 KB)

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 27, 2023, 8:07pm UTC](https://forum.inductiveautomation.com/t/css-hover-style-for-svg-images-custom-buttons/69110/3 "2023-01-27T20:07:54Z")

</div>

I can do basic borders and such, but I'm looking for a style like the buttons where the boxShadow appears when the mouse enters the area. I thought this would be possible with CSS, but maybe there's a couple built-in event scripts on the button.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [January 27, 2023, 8:30pm UTC](https://forum.inductiveautomation.com/t/css-hover-style-for-svg-images-custom-buttons/69110/4 "2023-01-27T20:30:04Z")

</div>

If you want it to react when the mouse moves over it, you need to use the `:hover` meta selector:

> [@Perspective Custom Button](https://forum.inductiveautomation.com/t/perspective-custom-button/49119/3):
>
> I did a flex container with a style class (on the root container, crucially) - the meta props are what you’re after: [screenshot2c8ZBn]

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 27, 2023, 8:37pm UTC](https://forum.inductiveautomation.com/t/css-hover-style-for-svg-images-custom-buttons/69110/5 "2023-01-27T20:37:27Z")

</div>

I tried:

```auto
.psc-Invisible_Button{
    cursor: pointer;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s;
    transition-property: box-shadow, background-color;
}

.psc-Invisible_Button:hover{
	box-shadow: var(--boxShadow);
}

```

no dice.