HTML
<div id="effects" class="effects"> <h2>2D Transitions</h2> <a href="#" class="hvr-grow">Grow</a> <a href="#" class="hvr-shrink">Shrink</a> <a href="#" class="hvr-pulse">Pulse</a> <a href="#" class="hvr-pulse-grow">Pulse Grow</a> <a href="#" class="hvr-pulse-shrink">Pulse Shrink</a> <a href="#" class="hvr-push">Push</a> <a href="#" class="hvr-pop">Pop</a> <a href="#" class="hvr-bounce-in">Bounce In</a> <a href="#" class="hvr-bounce-out">Bounce Out</a> <a href="#" class="hvr-rotate">Rotate</a> <a href="#" class="hvr-grow-rotate">Grow Rotate</a> <a href="#" class="hvr-float">Float</a> <a href="#" class="hvr-sink">Sink</a> <a href="#" class="hvr-bob">Bob</a> <a href="#" class="hvr-hang">Hang</a> <a href="#" class="hvr-skew">Skew</a> <a href="#" class="hvr-skew-forward">Skew Forward</a> <a href="#" class="hvr-skew-backward">Skew Backward</a> <a href="#" class="hvr-wobble-horizontal">Wobble Horizontal</a> <a href="#" class="hvr-wobble-vertical">Wobble Vertical</a> <a href="#" class="hvr-wobble-to-bottom-right">Wobble To Bottom Right</a> <a href="#" class="hvr-wobble-to-top-right">Wobble To Top Right</a> <a href="#" class="hvr-wobble-top">Wobble Top</a> <a href="#" class="hvr-wobble-bottom">Wobble Bottom</a> <a href="#" class="hvr-wobble-skew">Wobble Skew</a> <a href="#" class="hvr-buzz">Buzz</a> <a href="#" class="hvr-buzz-out">Buzz Out</a> <a href="#" class="hvr-forward">Forward</a> <a href="#" class="hvr-backward">Backward</a> <h2>Background Transitions</h2> <a href="#" class="hvr-fade">Fade</a> <a href="#" class="hvr-back-pulse">Back Pulse</a> <a href="#" class="hvr-sweep-to-right">Sweep To Right</a> <a href="#" class="hvr-sweep-to-left">Sweep To Left</a> <a href="#" class="hvr-sweep-to-bottom">Sweep To Bottom</a> <a href="#" class="hvr-sweep-to-top">Sweep To Top</a> <a href="#" class="hvr-bounce-to-right">Bounce To Right</a> <a href="#" class="hvr-bounce-to-left">Bounce To Left</a> <a href="#" class="hvr-bounce-to-bottom">Bounce To Bottom</a> <a href="#" class="hvr-bounce-to-top">Bounce To Top</a> <a href="#" class="hvr-radial-out">Radial Out</a> <a href="#" class="hvr-radial-in">Radial In</a> <a href="#" class="hvr-rectangle-in">Rectangle In</a> <a href="#" class="hvr-rectangle-out">Rectangle Out</a> <a href="#" class="hvr-shutter-in-horizontal">Shutter In Horizontal</a> <a href="#" class="hvr-shutter-out-horizontal">Shutter Out Horizontal</a> <a href="#" class="hvr-shutter-in-vertical">Shutter In Vertical</a> <a href="#" class="hvr-shutter-out-vertical">Shutter Out Vertical</a> <h2>Icons</h2> <small>Demo font icons courtesy of <a href="https://fortawesome.github.io/Font-Awesome/">FontAwesome</a>. <a href="https://github.com/IanLunn/Hover/#using-icon-effects">How to use icons</a> with Hover.css.</small> <a href="#" class="hvr-icon-back"> <i class="fa fa-chevron-circle-left hvr-icon"></i> Icon Back </a> <a href="#" class="hvr-icon-forward"> Icon Forward <i class="fa fa-chevron-circle-right hvr-icon"></i> </a> <a href="#" class="hvr-icon-down"> Icon Down <i class="fa fa-arrow-circle-o-down hvr-icon"></i> </a> <a href="#" class="hvr-icon-up"> Icon Up <i class="fa fa-arrow-circle-o-up hvr-icon"></i> </a> <a href="#" class="hvr-icon-spin"> Icon Spin <i class="fa fa-refresh hvr-icon"></i> </a> <a href="#" class="hvr-icon-drop"> Icon Drop <i class="fa fa-tint hvr-icon"></i> </a> <a href="#" class="hvr-icon-fade"> Icon Fade <i class="fa fa-check hvr-icon"></i> </a> <a href="#" class="hvr-icon-float-away"> Icon Float Away <i class="fa fa-plus-circle hvr-icon"></i> </a> <a href="#" class="hvr-icon-sink-away"> Icon Sink Away <i class="fa fa-minus-circle hvr-icon"></i> </a> <a href="#" class="hvr-icon-grow"> Icon Grow <i class="fa fa-smile-o hvr-icon"></i> </a> <a href="#" class="hvr-icon-shrink"> Icon Shrink <i class="fa fa-frown-o hvr-icon"></i> </a> <a href="#" class="hvr-icon-pulse"> Icon Pulse <i class="fa fa-home hvr-icon"></i> </a> <a href="#" class="hvr-icon-pulse-grow"> Icon Pulse Grow <i class="fa fa-home hvr-icon"></i> </a> <a href="#" class="hvr-icon-pulse-shrink"> Icon Pulse Shrink <i class="fa fa-home hvr-icon"></i> </a> <a href="#" class="hvr-icon-push"> Icon Push <i class="fa fa-star-o hvr-icon"></i> </a> <a href="#" class="hvr-icon-pop"> Icon Pop <i class="fa fa-star hvr-icon"></i> </a> <a href="#" class="hvr-icon-bounce"> Icon Bounce <i class="fa fa-thumbs-o-up hvr-icon"></i> </a> <a href="#" class="hvr-icon-rotate"> Icon Rotate <i class="fa fa-paperclip hvr-icon"></i> </a> <a href="#" class="hvr-icon-grow-rotate"> Icon Grow Rotate <i class="fa fa-phone hvr-icon"></i> </a> <a href="#" class="hvr-icon-float"> Icon Float <i class="fa fa-arrow-circle-o-up hvr-icon"></i> </a> <a href="#" class="hvr-icon-sink"> Icon Sink <i class="fa fa-arrow-circle-o-down hvr-icon"></i> </a> <a href="#" class="hvr-icon-bob"> Icon Bob <i class="fa fa-chevron-up hvr-icon"></i> </a> <a href="#" class="hvr-icon-hang"> Icon Hang <i class="fa fa-chevron-down hvr-icon"></i> </a> <a href="#" class="hvr-icon-wobble-horizontal"> Icon Wobble Horizontal <i class="fa fa-arrow-right hvr-icon"></i> </a> <a href="#" class="hvr-icon-wobble-vertical"> Icon Wobble Vertical <i class="fa fa-arrow-up hvr-icon"></i> </a> <a href="#" class="hvr-icon-buzz"> Icon Buzz <i class="fa fa-clock-o hvr-icon"></i> </a> <a href="#" class="hvr-icon-buzz-out"> Icon Buzz Out <i class="fa fa-lock hvr-icon"></i> </a> <h2>Border Transitions</h2> <a href="#" class="hvr-border-fade">Border Fade</a> <a href="#" class="hvr-hollow">Hollow</a> <a href="#" class="hvr-trim">Trim</a> <a href="#" class="hvr-ripple-out">Ripple Out</a> <a href="#" class="hvr-ripple-in">Ripple In</a> <a href="#" class="hvr-outline-out">Outline Out</a> <a href="#" class="hvr-outline-in">Outline In</a> <a href="#" class="hvr-round-corners">Round Corners</a> <a href="#" class="hvr-underline-from-left">Underline From Left</a> <a href="#" class="hvr-underline-from-center">Underline From Center</a> <a href="#" class="hvr-underline-from-right">Underline From Right</a> <a href="#" class="hvr-reveal">Reveal</a> <a href="#" class="hvr-underline-reveal">Underline Reveal</a> <a href="#" class="hvr-overline-reveal">Overline Reveal</a> <a href="#" class="hvr-overline-from-left">Overline From Left</a> <a href="#" class="hvr-overline-from-center">Overline From Center</a> <a href="#" class="hvr-overline-from-right">Overline From Right</a> <h2>Shadow and Glow Transitions</h2> <a href="#" class="hvr-shadow">Shadow</a> <a href="#" class="hvr-grow-shadow">Grow Shadow</a> <a href="#" class="hvr-float-shadow">Float Shadow</a> <a href="#" class="hvr-glow">Glow</a> <a href="#" class="hvr-shadow-radial">Shadow Radial</a> <a href="#" class="hvr-box-shadow-outset">Box Shadow Outset</a> <a href="#" class="hvr-box-shadow-inset">Box Shadow Inset</a> <h2>Speech Bubbles</h2> <a href="#" class="hvr-bubble-top">Bubble Top</a> <a href="#" class="hvr-bubble-right">Bubble Right</a> <a href="#" class="hvr-bubble-bottom">Bubble Bottom</a> <a href="#" class="hvr-bubble-left">Bubble Left</a> <a href="#" class="hvr-bubble-float-top">Bubble Float Top</a> <a href="#" class="hvr-bubble-float-right">Bubble Float Right</a> <a href="#" class="hvr-bubble-float-bottom">Bubble Float Bottom</a> <a href="#" class="hvr-bubble-float-left">Bubble Float Left</a> <h2>Curls</h2> <a href="#" class="hvr-curl-top-left">Curl Top Left</a> <a href="#" class="hvr-curl-top-right">Curl Top Right</a> <a href="#" class="hvr-curl-bottom-right">Curl Bottom Right</a> <a href="#" class="hvr-curl-bottom-left">Curl Bottom Left</a> </div>
CSS
/**
* The following are default styles for the demo page,
* you don't need to include these on your own site.
*/
@import url(http://fonts.googleapis.com/css?family=Roboto);
body {
margin: 0;
padding: 20px 50px;
font-family: sans-serif;
color: #333;
line-height: 140%;
}
[class^="hvr-"] {
font-family: 'Roboto', sans-serif;
}
[class^="hvr-"] {
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);
/* Smooth fonts */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: #2098D1;
text-decoration: none;
}
.effects {
margin-top: 6em;
}
h1 {
text-align: center;
font-size: 3em;
}
h2 {
margin-top: 1em;
}
h3 {
margin: 0;
}
{ } JS
Preview