CSS Hover Style for SVG Images (Custom Buttons)

Ignition
,
1

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:

.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:

.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.

2

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 (1.1 KB)

3

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.

4

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

5

I tried:

.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.