How can I create a button that fades from one colour to another colour on hover?

Design help General
1

I’m recreating the current Spotify homepage design in Webflow as a challenge for me to test Webflow’s capabilities. It’s working really well so far but I had a question about hover effects.

I’ve been able to create a button that changes colour on hover but is it possible to animate the transition in Webflow as standard, making the transition fade?

Thanks!

Here is my public share link: http://spotify-ceebf9.webflow.io

2

Everything in the style panel can have a transition as long as you declare one. In the Transition panel, inside the Transition and Transforms group:

http://vincent.polenordstudio.fr/snap/yn7ti.jpg

Avoid setting it to “All” which have dramatic effects on performance. Chose the right one, and you can add several.

In your case, you’re looking for a transition in bg color, so:

http://vincent.polenordstudio.fr/snap/zeu85.jpg

You can then precisely define how the transition animates with the super neat WF Easing Editor:

http://vincent.polenordstudio.fr/snap/dlkbk.jpg

Tip: good transitions are quick. Half of what you usually first try :wink:

3

Well that was easy, impressive stuff, cheers!

1 Like
4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.