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
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)
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
I found what is causing this. If we take a look at the :hover state of SVG element, then we can see this:
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.
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.
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.
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.
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?