How to smooth transition on button state?

Animation
1

Hi,

A button hover change state instantly. How can I do this with a smooth effect?

In CSS It would be:
transition: all 0.3s ease-in-out 0s;

In Hype I don’t see the solution to do this.

2

Give your button an id and add the CSS code to your head HTML file corresponding to the ID you set.

3

Thanks :wink:

5

this might offer some help https : // css - tricks . com/different-transitions-for-hover-on-hover-off/

6

This is a thread about an OS / iOS UIButton state not CSS
The thread offers a solution for touch screen devices instantiating a UIButton class
Note This is not for use in Hype.

Your other post however is right on the money!

For those not wanting to follow the link:

• Here is the code to set in your Head HTML within Hype (3.0.3)

.hoverAnimation {
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-ms-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}

#btn1:active {
	transition: none;
}

#btn2:active {
	transition: none;
}

This code will render animations for all css properties on any element with the class .hoverAnimations
The effect will not happen on the "pressed" state. You can modify each state within Hype's Inspector.

buttonHoverAnimations.zip (23.1 KB)

1 Like