Streaming live at 10am (PST)

Button gradient background transition effect

Hey guys!

Is it possible to create this hover effect using the transitions panel on Webflow? Can’t make this work by using Background Color or Background Position options:

This is a codepen with the CSS code for it:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @rodrigo_leles :wave:

Would you be able to achieve this by simply changing the gradient angle for your hover state?

Hi @Esteban,

Unfortunately not. I choose this transition for my button in the normal state:


And it does just a frame swap, without any transition. You can see it in the first button in the hero section:

Arh that’s a bummer!

I quickly found this link for you…

Maybe give that a whirl and take the only the code you need and adjust your colours to suit. :slight_smile:

1 Like

Thanks bro!

Were you able to use this on some project? This needs to be set as a CSS Custom Code right?

Trying to use just the piece of CSS I need but is not working:

I haven’t tried it i’m afraid - I simply seen it and thought it was pretty much what you were trying to achieve.

I’ve just seen this code, and tried it and it worked…


.gradient {
  background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
  background-size: 300%;
  background-position: left;
  transition: background-position 500ms ease;

.gradient:hover {
  background-position: right;

Try that one, see what you think - change easing etc to suit :grinning:


Drop an embed element on the desired page, add this code to it. Save & close and job should be a good one!

Remember to give your button the correct class as ‘.gradient’ or change the .gradient to whatever your button class is.

Sweet! Thanks you so much man. Now I got that the code actually MOVES the gradient and it’s not the same as the Webflow transitions :grin:

1 Like