Hover Effect

2D Transitions

Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out

<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>

Background Transitions

Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top Bounce To Right Bounce To Left Bounce To Bottom Bounce To Top Radial Out Radial In Rectangle In Rectangle Out Shutter In Horizontal Shutter Out Horizontal Shutter In Vertical Shutter Out Vertical

<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 class="hvr-bounce-to-left" href="#">Bounce To Left</a>
<a class="hvr-bounce-to-bottom" href="#">Bounce To Bottom</a>
<a class="hvr-bounce-to-top" href="#">Bounce To Top</a>
<a class="hvr-radial-out" href="#">Radial Out</a>
<a class="hvr-radial-in" href="#">Radial In</a>
<a class="hvr-rectangle-in" href="#">Rectangle In</a>
<a class="hvr-rectangle-out" href="#">Rectangle Out</a>
<a class="hvr-shutter-in-horizontal" href="#">Shutter In Horizontal</a>
<a class="hvr-shutter-out-horizontal" href="#">Shutter Out Horizontal</a>
<a class="hvr-shutter-in-vertical" href="#">Shutter In Vertical</a>
<a class="hvr-shutter-out-vertical" href="#">Shutter Out Vertical</a>

Icons

Icon Back Icon Forward Icon Down Icon Up Icon Spin Icon Drop Icon Fade Icon Float Away Icon Sink Away Icon Grow Icon Shrink Icon Pulse Icon Pulse Grow Icon Pulse Shrink Icon Push Icon Pop Icon Bounce Icon Rotate Icon Grow Rotate Icon Float Icon Sink Icon Bob Icon Hang Icon Wobble Horizontal Icon Wobble Vertical Icon Buzz Icon Buzz Out

<a class="hvr-icon-back pl-40" href="#">Icon Back</a>
<a class="hvr-icon-forward" href="#">Icon Forward</a>
<a class="hvr-icon-down" href="#">Icon Down</a>
<a class="hvr-icon-up" href="#">Icon Up</a>
<a class="hvr-icon-spin" href="#">Icon Spin</a>
<a class="hvr-icon-drop" href="#">Icon Drop</a>
<a class="hvr-icon-fade" href="#">Icon Fade</a>
<a class="hvr-icon-float-away" href="#">Icon Float Away</a>
<a class="hvr-icon-sink-away" href="#">Icon Sink Away</a>
<a class="hvr-icon-grow" href="#">Icon Grow</a>
<a class="hvr-icon-shrink" href="#">Icon Shrink</a>
<a class="hvr-icon-pulse" href="#">Icon Pulse</a>
<a class="hvr-icon-pulse-grow" href="#">Icon Pulse Grow</a>
<a class="hvr-icon-pulse-shrink" href="#">Icon Pulse Shrink</a>
<a class="hvr-icon-push" href="#">Icon Push</a>
<a class="hvr-icon-pop" href="#">Icon Pop</a>
<a class="hvr-icon-bounce" href="#">Icon Bounce</a>
<a class="hvr-icon-rotate" href="#">Icon Rotate</a>
<a class="hvr-icon-grow-rotate" href="#">Icon Grow Rotate</a>
<a class="hvr-icon-float" href="#">Icon Float</a>
<a class="hvr-icon-sink" href="#">Icon Sink</a>
<a class="hvr-icon-bob" href="#">Icon Bob</a>
<a class="hvr-icon-hang" href="#">Icon Hang</a>
<a class="hvr-icon-wobble-horizontal" href="#">Icon Wobble Horizontal</a>
<a class="hvr-icon-wobble-vertical" href="#">Icon Wobble Vertical</a>
<a class="hvr-icon-buzz" href="#">Icon Buzz</a>
<a class="hvr-icon-buzz-out" href="#">Icon Buzz Out</a>

Border Transitions

Border Fade Hollow Trim Ripple Out Ripple In Outline Out Outline In Round Corners Underline From Left Underline From Center Underline From Right Reveal Underline Reveal Overline Reveal Overline From Left Overline From Center Overline From Right

<a class="hvr-border-fade" href="#">Border Fade</a>
<a class="hvr-hollow" href="#">Hollow</a>
<a class="hvr-trim" href="#">Trim</a>
<a class="hvr-ripple-out" href="#">Ripple Out</a>
<a class="hvr-ripple-in" href="#">Ripple In</a>
<a class="hvr-outline-out" href="#">Outline Out</a>
<a class="hvr-outline-in" href="#">Outline In</a>
<a class="hvr-round-corners" href="#">Round Corners</a>
<a class="hvr-underline-from-left" href="#">Underline From Left</a>
<a class="hvr-underline-from-center" href="#">Underline From Center</a>
<a class="hvr-underline-from-right" href="#">Underline From Right</a>
<a class="hvr-reveal" href="#">Reveal</a>
<a class="hvr-underline-reveal" href="#">Underline Reveal</a>
<a class="hvr-overline-reveal" href="#">Overline Reveal</a>
<a class="hvr-overline-from-left" href="#">Overline From Left</a>
<a class="hvr-overline-from-center" href="#">Overline From Center</a>
<a class="hvr-overline-from-right" href="#">Overline From Right</a>

Shadow and Glow Transitions

Shadow Grow Shadow Float Shadow Glow Shadow Radial Box Shadow Outset Box Shadow Inset

<a class="hvr-shadow" href="#">Shadow</a>
<a class="hvr-grow-shadow" href="#">Grow Shadow</a>
<a class="hvr-float-shadow" href="#">Float Shadow</a>
<a class="hvr-glow" href="#">Glow</a>
<a class="hvr-shadow-radial" href="#">Shadow Radial</a>
<a class="hvr-box-shadow-outset" href="#">Box Shadow Outset</a>
<a class="hvr-box-shadow-inset" href="#">Box Shadow Inset</a>

Speech Bubbles

Bubble Top Bubble Right Bubble Bottom Bubble Left Bubble Float Top Bubble Float Right Bubble Float Bottom Bubble Float Left

<a class="hvr-bubble-top" href="#">Bubble Top</a>
<a class="hvr-bubble-right" href="#">Bubble Right</a>
<a class="hvr-bubble-bottom" href="#">Bubble Bottom</a>
<a class="hvr-bubble-left" href="#">Bubble Left</a>
<a class="hvr-bubble-float-top" href="#">Bubble Float Top</a>
<a class="hvr-bubble-float-right" href="#">Bubble Float Right</a>
<a class="hvr-bubble-float-bottom" href="#">Bubble Float Bottom</a>
<a class="hvr-bubble-float-left" href="#">Bubble Float Left</a>

Curls

Curl Top Left Curl Top Right Curl Bottom Right Curl Bottom Left

<a class="hvr-curl-top-left" href="#">Curl Top Left</a>
<a class="hvr-curl-top-right" href="#">Curl Top Right</a>
<a class="hvr-curl-bottom-right" href="#">Curl Bottom Right</a>
<a class="hvr-curl-bottom-left" href="#">Curl Bottom Left</a>