NO BUG: Button icon colour on hover won't work with classes

Bugs
1

Hello
I am using

%root%:hover svg {
stroke:currentColor;
}

to change the colour of my button icon on hover.

This works fine if I put this in the custom css of the individual button element, but not if I try and add it as custom css for the custom class I have given the button, so that it would apply to all buttons I added that class to.
Any ideas?
Thank you

2

Hi @Molly,

I just tested with a very similar code to yours. (fill property instead of stroke), because of my SVG, and it is working even if I add it to the class.

Can you share the URL to your page, so that I can see how that class and styling is applied? (And please point me to the button that has this class)

–
Matej

3

On this page, the first and third button have the code applied to the class .button-solid-green and it isn’t changing the colour. The second outline button has the css applied to the individual button and it’s working

4

Hi,

I found what is causing this. If we take a look at the :hover state of SVG element, then we can see this:
image

It looks like you have some styling applied on the ID level, and one of the styles is also stoke, which you also apply in your custom CSS.
But, because the first stroke targets ID level, it’s a bit more specific, so it overrides the other one. If you also style that (stroke, height, width) on the class level, then it should work.

Hopefully, It’s understandable enough, otherwise please let me know.

Matej

5

I think I see what you mean, and have added the dimensions to the class styling.
But it’s still not working!
Now on the page, I have:
Button 1 styled the class using specific hex colour
Button 2 styled class using currentcolor
Button 3 styled individual button using currentcolor.

3 is working, 1 and 2 are not.

6

Hi,

thank you for the examples.
In the SVG itself, you seem to have stroke=white attribute on the “path” element. If you remove that, I believe the second one should also work.

image
image1318Ă—329 37.7 KB

Now, for the first one, if you remove the stroke the same as above, it still does not work, because (if I see correctly), there is stroke: #fefef9; applied even on hover.

Can you check that?

Thanks.

7

I see. I’ve exported the svg from a figma file. If I remove the stroke colour from the arrow in figma it won’t let me export it, presumably because it’s then invisible! Any tips?

8

Hi,

what if you manually remove that stroke white from SVG?

Also, can you copy-paste your section here, so then I can take a look at your exact case, and see if we can somehow improve this?

Thanks.

9

Thank you! I edited the SVG itself and now everything is working fine. Thanks for your time on this.

1 Like
10

Perfect, I’m happy to hear this.
I’ll mark this topic as a no bug :slight_smile:

Matej