Streaming live at 10am (PST)

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


#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:

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:

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

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


#3

Well that was easy, impressive stuff, cheers!


#4

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