A quick tutorial to hover.css

September 14th, 2016
A 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 […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

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:

If you want to have animated icons on your buttons, you’ll also need FontAwesome:

Making hover.css work

If you have a button like this…

Button

(I’m using Bootstrap to style my buttons here, but feel free to apply whatever styling you want).

… then apply a hover.css transition to it like this (move your cursor over the button to see the effect):

Button

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:

Button

Sadly, it’s not possible to change the actual icon used for each effect (see below for a list of icons effects), since they’re hardcoded in the CSS – unless you go into the CSS file and actually make the change there.

Hover.css Effect Reference

2D Transitions

hvr-grow hvr-shrink hvr-pulse hvr-pulse-grow hvr-pulse-shrink hvr-push hvr-pop hvr-bounce-in hvr-bounce-out hvr-rotate hvr-grow-rotate hvr-float hvr-sink hvr-bob hvr-hang hvr-skew hvr-skew-forward hvr-skew-backward hvr-wobble-horizontal hvr-wobble-vertical hvr-wobble-to-bottom-right hvr-wobble-to-top-right hvr-wobble-top hvr-wobble-bottom hvr-wobble-skew hvr-buzz hvr-buzz-out

Background Transitions

hvr-fade hvr-back-pulse hvr-sweep-to-right hvr-sweep-to-left hvr-sweep-to-bottom hvr-sweep-to-top hvr-bounce-to-right hvr-bounce-to-left hvr-bounce-to-bottom hvr-bounce-to-top hvr-radial-out hvr-radial-in hvr-rectangle-in hvr-rectangle-out hvr-shutter-in-horizontal hvr-shutter-out-horizontal hvr-shutter-in-vertical hvr-shutter-out-vertical

Border Transitions

hvr-border-fade hvr-hollow hvr-trim hvr-ripple-out hvr-ripple-in hvr-outline-out hvr-outline-in hvr-round-corners hvr-underline-from-left hvr-underline-from-center hvr-underline-from-right hvr-reveal hvr-underline-reveal hvr-overline-reveal hvr-overline-from-left hvr-overline-from-center hvr-overline-from-right

Shadow and Glow Transitions

hvr-shadow hvr-grow-shadow hvr-float-shadow hvr-glow hvr-shadow-radial hvr-box-shadow-outset hvr-box-shadow-inset

Curls

hvr-curl-top-left hvr-curl-top-right hvr-curl-bottom-right hvr-curl-bottom-left

Icons

hvr-icon-back hvr-icon-forward hvr-icon-down hvr-icon-up hvr-icon-spin hvr-icon-drop hvr-icon-fade hvr-icon-float-away hvr-icon-sink-away hvr-icon-grow hvr-icon-shrink hvr-icon-pulse hvr-icon-pulse-grow hvr-icon-pulse-shrink hvr-icon-push hvr-icon-pop hvr-icon-bounce hvr-icon-rotate hvr-icon-grow-rotate hvr-icon-float hvr-icon-sink hvr-icon-bob hvr-icon-hang hvr-icon-wobble-horizontal hvr-icon-wobble-vertical hvr-icon-buzz hvr-icon-buzz-out

Save

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">