Fade from Normal Button state to Hover button state

Hello, is there a way to fade between the normal and hover button state. I know you can do a workaround using timeline, but trying to limit the amount of timelines I’m building. TIA.

Use CSS in the Head HTML to set a transition.

.aButtonThatNeedsAFade:hover {
    transition: background-color 1s ease-out;

give a class name to the button element:


and you’re good to go.

Note: stating the obvious perhaps but the class name can be different :wink:

There’s not a way to do this with button states currently; timelines or @DBear’s suggestion is the way to go. Of course I think this is a good feature request!

1 Like

hoverTest.zip (103.0 KB)

Hmmm. tried it and not working… total newb when it comes to HTML :grin:


Umm … if you are a total newb with HTML then it’s gonna be a bumpy ride. :smiley:

I was unaware that you were using an image so the code must change. Also, you are assigning a class of buttons but your class name on the element is button which will not work you must have same class name in your css or change your class name to “buttons”.

.buttons:hover {
    transition: background-image 1s ease-out;

or to effect all background you can use

.buttons:hover {
    transition: background 1s ease-out;

class name must be the same.


Reading material:



Doh! Did not catch the difference in the name. Really appreciate the help :slight_smile: