Fade from Normal Button state to Hover button state


(Michael) #1

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.


#2

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:

B7AF45F2-7FEE-4489-92D0-6D8E2C5694AF

and you’re good to go.

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


(Jonathan Deutsch) #3

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!


(Michael) #4

hoverTest.zip (103.0 KB)

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

Thanks!


#5

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.

B32EAF82-D6CE-4424-B878-488C8ED63905

Reading material:

https://www.w3schools.com/css/css3_transitions.asp


(Michael) #6

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