Button Hover transition help

[Douglas_Fllrtn]

Hey guys,

I am having an issue with my hover transition. The “none” state background of the button is a gradient. When I hover over it, I want it to become white. For some reason the “All Properties” under transitions doesn’t apply to it when using a gradient …
I’m talking about this button:

https://preview.webflow.com/preview/ds-f?utm_source=ds-f&preview=b7a8bedd78fccc813aa0548986267748

Thanks for any insight to this!

---

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

[knk (Keiran)]

Hi Douglas, @Douglas_Fllrtn

I had a quick look at the settings on hover state.

I was able to change the ‘Solid Colour’ setting and change to White. The Hover transition worked successfully.

I also deleted the ‘Solid Colour’ and added ‘Gradient’ as the background (selecting ‘Linear Gradient’) and it also works successfully.

Are you able to make those changes to see if the Hover transition is working as you intend?

[Douglas_Fllrtn]

Thanks for your reply. Sorry, I don’T fully get which state you are referring to when do you mind clarifying?

Thanks for taking the time!

[knk (Keiran)]

Hey Doug,

No problem. I’ll make a quick little video shortly and post for you shortly.

[knk (Keiran)]

Hi Doug @Douglas_Fllrtn

See if this helps:

[Douglas_Fllrtn]

Kieran I appreciate you making the Vid and explaining. I now realize where the miscommunication was; I made a mistake explaining:
The issue I am having is when I hover, the background changes very statically (unlike the changing text colour) - this is achieved in the transitions section. But for some reason, it does not apply to the background of a button when using a gradient.

Sorry, seems like an entire different question I am asking now that I look at that awful attempt to explain my issue earlier

[knk (Keiran)]

Hey Doug,

No worries. I think I better understand what it is you want to do. The transition hover effect can be changed using easing and setting a longer transition time period. Those settings can be set for each state (None, Hover).

I’ll be away from the PC for a while, if you still stuck I’ve have a play later.

[magicmark (Mark Willis)]

Hi @Douglas_Fllrtn

1. In the Hover State, make sure the button has these settings:
   

   

2. In the Normal State it should have these settings:
   

   

EDIT: Also add a Font Colour Transition too. You can add multiple transitions to one element.

Hope that helps!