I’m trying to create a hover effect on the button where the button colour changes as well as the icon. Here is my current setup:
I know how to change the background colour of my button using ‘Hover’, but how do I change the calendar icon on hover? I effectively want to hide the white icon, and display the blue icon on hover (in exactly the same position)
Right now you’re using a background-image on your text class to generate the icon but I’d recommend going a different route. While there are some hacky ways to change the color of bitmap images using CSS filters, the best option is to use the SVG code with the currentColor property.
Using this on your SVGs fill or stroke attribute will tell it to pull the color from the parent element text color instead — meaning that the icon will always match the color of the type.
Instead of an image element, you’re going to use an HTML Embed element. You’ll need to grab the raw SVG code (which you can get by opening your SVG in Notepad or TextEdit) and then change any of the fill="#HEX" or stroke="#HEX" to fill="currentColor" or stroke="currentColor" respectively.
Now copy that code and paste it inside your HTML Embed element and you should have yourself a dynamic SVG icon
Give that a try and don’t hesitate to reach out if you run into any issues (along with your read-only link) and I’d be happy to take a peek.
Hello Mike! I have a similar issue now. May I ask you for help?
I have circle buttons that are supposed to trigger a slider. I used “embed html” function to get an error, which was placed in the frame with the rounded corners. I could add “currentColor”, and I can change the arror color in the Typogrophy section.
However, on hover, when I change the background of the circle frame from white to black, the color change for my svg arrow does not work.
This is a closed thread but I figured I’d reply so weren’t left in the dark. The reason you’re not seeing the change is that your HTML Embed 2 class has a style override for the typography color (shown with the blue label color):
Removing this style allows the hover state to work as expected:
One thing to note — you’ve got a hover state on your HTML Embed 2 class as well, but this only needs to be on the parent wrapper. The typography color you set for that hover will affect the HTML Embed 2 child class (as long as it doesn’t have an override like we just fixed above) so make sure you remove that hover state as well.
Right now hovering over the HTML Embed 2 element is setting the arrow to be transparent
(which is why I only hovered over the edge in my recording)
