BUTTONS

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 href="#" class="btn btn-hvr hvr-grow">Grow</a>
<a href="#" class="btn btn-hvr hvr-shrink">Shrink</a>
<a href="#" class="btn btn-hvr hvr-pulse">Pulse</a>
<a href="#" class="btn btn-hvr hvr-pulse-grow">Pulse Grow</a>
<a href="#" class="btn btn-hvr hvr-pulse-shrink">Pulse Shrink</a>
<a href="#" class="btn btn-hvr hvr-push">Push</a>
<a href="#" class="btn btn-hvr hvr-pop">Pop</a>
<a href="#" class="btn btn-hvr hvr-bounce-in">Bounce In</a>
<a href="#" class="btn btn-hvr hvr-bounce-out">Bounce Out</a>
<a href="#" class="btn btn-hvr hvr-rotate">Rotate</a>
<a href="#" class="btn btn-hvr hvr-grow-rotate">Grow Rotate</a>
<a href="#" class="btn btn-hvr hvr-float">Float</a>
<a href="#" class="btn btn-hvr hvr-sink">Sink</a>
<a href="#" class="btn btn-hvr hvr-bob">Bob</a>
<a href="#" class="btn btn-hvr hvr-hang">Hang</a>
<a href="#" class="btn btn-hvr hvr-skew">Skew</a>
<a href="#" class="btn btn-hvr hvr-skew-forward">Skew Forward</a>
<a href="#" class="btn btn-hvr hvr-skew-backward">Skew Backward</a>
<a href="#" class="btn btn-hvr hvr-wobble-horizontal">Wobble Horizontal</a>
<a href="#" class="btn btn-hvr hvr-wobble-vertical">Wobble Vertical</a>
<a href="#" class="btn btn-hvr hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>
<a href="#" class="btn btn-hvr hvr-wobble-to-top-right">Wobble To Top Right</a>
<a href="#" class="btn btn-hvr hvr-wobble-top">Wobble Top</a>
<a href="#" class="btn btn-hvr hvr-wobble-bottom">Wobble Bottom</a>
<a href="#" class="btn btn-hvr hvr-wobble-skew">Wobble Skew</a>
<a href="#" class="btn btn-hvr hvr-buzz">Buzz</a>
<a href="#" class="btn btn-hvr hvr-buzz-out">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 href="#" class="btn btn-hvr hvr-fade">Fade</a>
<a href="#" class="btn btn-hvr hvr-back-pulse">Back Pulse</a>
<a href="#" class="btn btn-hvr hvr-sweep-to-right">Sweep To Right</a>
<a href="#" class="btn btn-hvr hvr-sweep-to-left">Sweep To Left</a>
<a href="#" class="btn btn-hvr hvr-sweep-to-bottom">Sweep To Bottom</a>
<a href="#" class="btn btn-hvr hvr-sweep-to-top">Sweep To Top</a>
<a href="#" class="btn btn-hvr hvr-bounce-to-right">Bounce To Right</a>
<a href="#" class="btn btn-hvr hvr-bounce-to-left">Bounce To Left</a>
<a href="#" class="btn btn-hvr hvr-bounce-to-bottom">Bounce To Bottom</a>
<a href="#" class="btn btn-hvr hvr-bounce-to-top">Bounce To Top</a>
<a href="#" class="btn btn-hvr hvr-radial-out">Radial Out</a>
<a href="#" class="btn btn-hvr hvr-radial-in">Radial In</a>
<a href="#" class="btn btn-hvr hvr-rectangle-in">Rectangle In</a>
<a href="#" class="btn btn-hvr hvr-rectangle-out">Rectangle Out</a>
<a href="#" class="btn btn-hvr hvr-shutter-in-horizontal">Shutter In Horizontal</a>
<a href="#" class="btn btn-hvr hvr-shutter-out-horizontal">Shutter Out Horizontal</a>
<a href="#" class="btn btn-hvr hvr-shutter-in-vertical">Shutter In Vertical</a>
<a href="#" class="btn btn-hvr hvr-shutter-out-vertical">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 href="#" class="btn btn-hvr hvr-icon-back">Icon Back</a>
<a href="#" class="btn btn-hvr hvr-icon-forward">Icon Forward</a>
<a href="#" class="btn btn-hvr hvr-icon-down">Icon Down</a>
<a href="#" class="btn btn-hvr hvr-icon-up">Icon Up</a>
<a href="#" class="btn btn-hvr hvr-icon-spin">Icon Spin</a>
<a href="#" class="btn btn-hvr hvr-icon-drop">Icon Drop</a>
<a href="#" class="btn btn-hvr hvr-icon-fade">Icon Fade</a>
<a href="#" class="btn btn-hvr hvr-icon-float-away">Icon Float Away</a>
<a href="#" class="btn btn-hvr hvr-icon-sink-away">Icon Sink Away</a>
<a href="#" class="btn btn-hvr hvr-icon-grow">Icon Grow</a>
<a href="#" class="btn btn-hvr hvr-icon-shrink">Icon Shrink</a>
<a href="#" class="btn btn-hvr hvr-icon-pulse">Icon Pulse</a>
<a href="#" class="btn btn-hvr hvr-icon-pulse-grow">Icon Pulse Grow</a>
<a href="#" class="btn btn-hvr hvr-icon-pulse-shrink">Icon Pulse Shrink</a>
<a href="#" class="btn btn-hvr hvr-icon-push">Icon Push</a>
<a href="#" class="btn btn-hvr hvr-icon-pop">Icon Pop</a>
<a href="#" class="btn btn-hvr hvr-icon-bounce">Icon Bounce</a>
<a href="#" class="btn btn-hvr hvr-icon-rotate">Icon Rotate</a>
<a href="#" class="btn btn-hvr hvr-icon-grow-rotate">Icon Grow Rotate</a>
<a href="#" class="btn btn-hvr hvr-icon-float">Icon Float</a>
<a href="#" class="btn btn-hvr hvr-icon-sink">Icon Sink</a>
<a href="#" class="btn btn-hvr hvr-icon-bob">Icon Bob</a>
<a href="#" class="btn btn-hvr hvr-icon-hang">Icon Hang</a>
<a href="#" class="btn btn-hvr hvr-icon-wobble-horizontal">Icon Wobble Horizontal</a>
<a href="#" class="btn btn-hvr hvr-icon-wobble-vertical">Icon Wobble Vertical</a>
<a href="#" class="btn btn-hvr hvr-icon-buzz">Icon Buzz</a>
<a href="#" class="btn btn-hvr hvr-icon-buzz-out">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 href="#" class="btn btn-hvr hvr-border-fade">Border Fade</a>
<a href="#" class="btn btn-hvr hvr-hollow">Hollow</a>
<a href="#" class="btn btn-hvr hvr-trim">Trim</a>
<a href="#" class="btn btn-hvr hvr-ripple-out">Ripple Out</a>
<a href="#" class="btn btn-hvr hvr-ripple-in">Ripple In</a>
<a href="#" class="btn btn-hvr hvr-outline-out">Outline Out</a>
<a href="#" class="btn btn-hvr hvr-outline-in">Outline In</a>
<a href="#" class="btn btn-hvr hvr-round-corners">Round Corners</a>
<a href="#" class="btn btn-hvr hvr-underline-from-left">Underline From Left</a>
<a href="#" class="btn btn-hvr hvr-underline-from-center">Underline From Center</a>
<a href="#" class="btn btn-hvr hvr-underline-from-right">Underline From Right</a>
<a href="#" class="btn btn-hvr hvr-reveal">Reveal</a>
<a href="#" class="btn btn-hvr hvr-underline-reveal">Underline Reveal</a>
<a href="#" class="btn btn-hvr hvr-overline-reveal">Overline Reveal</a>
<a href="#" class="btn btn-hvr hvr-overline-from-left">Overline From Left</a>
<a href="#" class="btn btn-hvr hvr-overline-from-center">Overline From Center</a>
<a href="#" class="btn btn-hvr hvr-overline-from-right">Overline From Right</a>

Shadow and Glow Transitions

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

<a href="#" class="btn btn-hvr hvr-shadow">Shadow</a>
<a href="#" class="btn btn-hvr hvr-grow-shadow">Grow Shadow</a>
<a href="#" class="btn btn-hvr hvr-float-shadow">Float Shadow</a>
<a href="#" class="btn btn-hvr hvr-glow">Glow</a>
<a href="#" class="btn btn-hvr hvr-shadow-radial">Shadow Radial</a>
<a href="#" class="btn btn-hvr hvr-box-shadow-outset">Box Shadow Outset</a>
<a href="#" class="btn btn-hvr hvr-box-shadow-inset">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 href="#" class="btn btn-hvr hvr-bubble-top">Bubble Top</a>
<a href="#" class="btn btn-hvr hvr-bubble-right">Bubble Right</a>
<a href="#" class="btn btn-hvr hvr-bubble-bottom">Bubble Bottom</a>
<a href="#" class="btn btn-hvr hvr-bubble-left">Bubble Left</a>
<a href="#" class="btn btn-hvr hvr-bubble-float-top">Bubble Float Top</a>
<a href="#" class="btn btn-hvr hvr-bubble-float-right">Bubble Float Right</a>
<a href="#" class="btn btn-hvr hvr-bubble-float-bottom">Bubble Float Bottom</a>
<a href="#" class="btn btn-hvr hvr-bubble-float-left">Bubble Float Left</a>

Curls

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

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