Button gradient background transition effect

Design help General
1

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:

34
34764×240 1010 KB

This is a codepen with the CSS code for it: https://codepen.io/rodrigo_leles/pen/KKKBgBL

Thanks!

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

2

Hey @rodrigo_leles :wave:

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

3

Hi @Esteban,

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

29

And it does just a frame swap, without any transition. You can see it in the first button in the hero section: https://preview.webflow.com/preview/kombucha-libre?utm_medium=preview_link&utm_source=dashboard&utm_content=kombucha-libre&preview=6660a97983f1bb9bf8b981e12b0e62af&mode=preview

4

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
5

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:

25
25748×270 31.4 KB

7

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…

<style>

.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;
}
</style>

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

8

@rodrigo_leles

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.

9

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