Johno89

Posted 11 months ago

Animate.css buttons on hover

View Profile

Using Animate.css we can make our buttons do some cool hover effects to bring our website to life. This is great if  for example want a sign-up button or another call-to-action button on your homepage to react as a user hover's over.  Animate.css can do several things from animating on page load to  infinite  loop and its not limited to just buttons either.  

First of we are going to add this to our css within our button class.

-webkit-animation: pulse 1s;
animation: pulse 1s;

Currently are button is set to pulse when we hover but animate css contains lots of different effects and all we do is change pulse  to the element we want you can find all of them on the website.

I'm using Scss & Bulma's default buttons to demonstrate the best method which you can check out below.

.button{  
&.is-primary:hover{
-webkit-animation: pulse 1s;
animation: pulse 1s;
}
}

if you prefer using standard css

.button.is-primary:hover{
-webkit-animation: pulse 1s;
animation: pulse 1s;
}

Thats it now we have cool hover effect buttons :)


Must be logged in to comment
Animate.css buttons on hover / Welcome to Signl