Hover-Transition doesn't work. Please help

Hey guys.
I’m doing some test-projects by myself to cement my knowledge with practical exercises.

Now i have a little problem with my Download button. I get the hover effect, but the transition doesn’t work. Anyone knows why this is?

Here is my codepen-link:

btw, it’s just about the button, don’t mind the text please!

Hi there! Seems like you forgot to set a width on hover.
Also use width instead of background in transition effect of your button element

Hey Ray, thanks for your response.
But if i change the width in transition and add width in hover, the button has a transition into a bigger/wider button.

Still, the color effect flips immediatly, and this is what i want a transition - from the first linear-gradient to the hover linear-gradient, you know what i mean?

Anyways, thanks for your response, but this wasn’t the solution i was looking for.

Ah yes, I see what you mean. In this case, are you looking for smth like this?

Ok first of all:

Thanks, this is exactly what i was looking for :grin::+1:

It is a bit more complicated than i hoped and i will adjust this when i have the rest done… I’ll let you know how it went when I do it (if i don’t forget it).

But anyways, thank you. Perfect solution

1 Like

You’re welcome! Good luck in your further attempts

1 Like

Along With transition property and value in a element selector, also you need transform property and value in hover selector. For how you want to transition an element.

1 Like