Hover Animation with CSS

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

HTML

<link rel="stylesheet" href="http://ianlunn.github.io/Hover/css/hover.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="effects">
    	<h2>2D Transitions</h2>
	<a class="hvr-grow" href="#">Grow</a>
	<a class="hvr-shrink" href="#">Shrink</a>
	<a class="hvr-pulse" href="#">Pulse</a>
	<a class="hvr-pulse-grow" href="#">Pulse Grow</a>
	<a class="hvr-pulse-shrink" href="#">Pulse Shrink</a>
	<a class="hvr-push" href="#">Push</a>
	<a class="hvr-pop" href="#">Pop</a>
	<a class="hvr-bounce-in" href="#">Bounce In</a>
	<a class="hvr-bounce-out" href="#">Bounce Out</a>
	<a class="hvr-rotate" href="#">Rotate</a>
	<a class="hvr-grow-rotate" href="#">Grow Rotate</a>
	<a class="hvr-float" href="#">Float</a>
	<a class="hvr-sink" href="#">Sink</a>
	<a class="hvr-bob" href="#">Bob</a>
	<a class="hvr-hang" href="#">Hang</a>
	<a class="hvr-skew" href="#">Skew</a>
	<a class="hvr-skew-forward" href="#">Skew Forward</a>
	<a class="hvr-skew-backward" href="#">Skew Backward</a>
	<a class="hvr-wobble-horizontal" href="#">Wobble Horizontal</a>
	<a class="hvr-wobble-vertical" href="#">Wobble Vertical</a>
	<a class="hvr-wobble-to-bottom-right" href="#">Wobble To Bottom Right</a>
	<a class="hvr-wobble-to-top-right" href="#">Wobble To Top Right</a>
	<a class="hvr-wobble-top" href="#">Wobble Top</a>
	<a class="hvr-wobble-bottom" href="#">Wobble Bottom</a>
	<a class="hvr-wobble-skew" href="#">Wobble Skew</a>
	<a class="hvr-buzz" href="#">Buzz</a>
	<a class="hvr-buzz-out" href="#">Buzz Out</a>

    	<h2 class='mt-30'>Background Transitions</h2>
	<a class="hvr-fade" href="#">Fade</a>
	<a class="hvr-back-pulse" href="#">Back Pulse</a>
	<a class="hvr-sweep-to-right" href="#">Sweep To Right</a>
	<a class="hvr-sweep-to-left" href="#">Sweep To Left</a>
	<a class="hvr-sweep-to-bottom" href="#">Sweep To Bottom</a>
	<a class="hvr-sweep-to-top" href="#">Sweep To Top</a>
	<a class="hvr-bounce-to-right" href="#">Bounce To Right</a>
	<a...

CSS

h2{
    font-size:18px;
    margin-bottom: 20px;
    line-height: 28px;
    margin-top:0;
    font-weight: 900;
}
.effects{
    
}
 body {
    margin: 0 auto;
    max-width: 800px;
    padding: 40px 20px 20px 20px;
    font-family: sans-serif;
    color: #333;
    line-height: 140%;
}
img {
    border: none;
}
small {
    display: block;
}
p, [class^="hvr-"] {
    font-family:'Roboto', sans-serif;
}
[class^="hvr-"] {
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    margin: .4em;
    padding: 1em;
    cursor: pointer;
    background: #e1e1e1;
    text-decoration: none;
    color: #666;
    /* Prevent highlight colour when element is tapped */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.aligncenter {
    text-align: center;
}

a {
    color: #2098D1;
    text-decoration: none;
}

.mt-30{
    margin-top:30px;
}