HOVER.CSS QUICK GUIDE TO USING HOVER.CSS EFFECTS
Hover.css is a great little CSS library that adds hover effects to your HTML links and buttons. In this tutorial, we’ll bring you up to speed quickly on how to use hover.css.
Getting hover.css
You can load hover.css from a content delivery network (CDN) or download it directly from the hover.css website. Link it from a CDN like so:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover.css"/>
</head>If you want to have animated icons on your buttons, you’ll also need FontAwesome:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover.css"/>
</head>Making hover.css work
If you have a button like this…
I’m using Bootstrap to style my buttons here, but feel free to apply whatever styling you want.
… then apply a hover.css grow transition to it like this (move your cursor over the button to see the effect):
Adding icons to your buttons
As long as you’ve referenced FontAwesome, adding icons to your buttons is just like using any other hover.css effect:
You can use any icon you want here - not necessarily from FontAwesome - as long as you set the hvr-icon on it.
In previous versions of hover.css, you could only use a set of predefined icons. This has now been improved.