Wipe colour change on mouse hover

Hi there,
I’d like to achieve an effect similar to the one on this site (https://proximitydesigns.org/) when you hover the mouse over the “Our Story” button on the main image, the button changes colour with a WIPE of colour from left to right.

I know how to change the colour on a mouse hover on Webflow, but not in a way that does the wipe. Any suggestions as to how I can do this on webflow v appreciated.

@Tom_Lloyd - this effect can be achieved with a hover interaction.

At a high level you would create a container for your button and place a div inside (with a background color of your hover state) it that takes up 100% height and 100% width.

Then with an interaction you would set it’s initial state to transform to the left outside of the parent container (the parent container would need overflow set to hidden). Then on hover you would use a move animation with easing to create the effect and a second move animation on hover out.

Those are the basic steps, if you are able to play around with it and do some searching on the forums. If you get stuck feel free to ask for additional help.