Hover Effects

Make your buttons more sassy

2D Transitions

<a href="#" class="button button-theme button-rounded hvr-grow">Grow</a>
<a href="#" class="button button-theme button-rounded hvr-shrink">Shrink</a>
<a href="#" class="button button-theme button-rounded hvr-pulse">Pulse</a>
<a href="#" class="button button-theme button-rounded hvr-pulse-grow">Pulse Grow</a>
<a href="#" class="button button-theme button-rounded hvr-pulse-shrink">Pulse Shrink</a>
<a href="#" class="button button-theme button-rounded hvr-push">Push</a>
<a href="#" class="button button-theme button-rounded hvr-pop">Pop</a>
<a href="#" class="button button-theme button-rounded hvr-bounce-in">Bounce In</a>
<a href="#" class="button button-theme button-rounded hvr-bounce-out">Bounce Out</a>
<a href="#" class="button button-theme button-rounded hvr-rotate">Rotate</a>
<a href="#" class="button button-theme button-rounded hvr-grow-rotate">Grow Rotate</a>
<a href="#" class="button button-theme button-rounded hvr-float">Float</a>
<a href="#" class="button button-theme button-rounded hvr-sink">Sink</a>
<a href="#" class="button button-theme button-rounded hvr-bob">Bob</a>
<a href="#" class="button button-theme button-rounded hvr-hang">Hang</a>
<a href="#" class="button button-theme button-rounded hvr-skew">Skew</a>
<a href="#" class="button button-theme button-rounded hvr-skew-forward">Skew Forward</a>
<a href="#" class="button button-theme button-rounded hvr-skew-backward">Skew Backward</a>
<a href="#" class="button button-theme button-rounded hvr-wobble-horizontal">Wobble Horizontal</a>
<a href="#" class="button button-theme button-rounded hvr-wobble-vertical">Wobble Vertical</a>
<a href="#" class="button button-theme button-rounded hvr-wobble-to-bottom-right">Wobble To Bottom Right</a>
<a href="#" class="button button-theme button-rounded hvr-wobble-to-top-right">Wobble To Top Right</a>
<a href="#" class="button button-theme button-rounded hvr-wobble-top">Wobble Top</a>
<a href="#" class="button button-theme button-rounded hvr-wobble-bottom">Wobble Bottom</a>
<a href="#" class="button button-theme button-rounded hvr-wobble-skew">Wobble Skew</a>
<a href="#" class="button button-theme button-rounded hvr-buzz">Buzz</a>
<a href="#" class="button button-theme button-rounded hvr-buzz-out">Buzz Out</a>
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

Background Transitions

<a href="#" class="button button-theme button-rounded hvr-fade">Fade</a>
<a href="#" class="button button-theme button-rounded hvr-back-pulse">Back Pulse</a>
<a href="#" class="button button-theme button-rounded hvr-sweep-to-right">Sweep To Right</a>
<a href="#" class="button button-theme button-rounded hvr-sweep-to-left">Sweep To Left</a>
<a href="#" class="button button-theme button-rounded hvr-sweep-to-bottom">Sweep To Bottom</a>
<a href="#" class="button button-theme button-rounded hvr-sweep-to-top">Sweep To Top</a>
<a href="#" class="button button-theme button-rounded hvr-bounce-to-right">Bounce To Right</a>
<a href="#" class="button button-theme button-rounded hvr-bounce-to-left">Bounce To Left</a>
<a href="#" class="button button-theme button-rounded hvr-bounce-to-bottom">Bounce To Bottom</a>
<a href="#" class="button button-theme button-rounded hvr-bounce-to-top">Bounce To Top</a>
<a href="#" class="button button-theme button-rounded hvr-radial-out">Radial Out</a>
<a href="#" class="button button-theme button-rounded hvr-radial-in">Radial In</a>
<a href="#" class="button button-theme button-rounded hvr-rectangle-in">Rectangle In</a>
<a href="#" class="button button-theme button-rounded hvr-rectangle-out">Rectangle Out</a>
<a href="#" class="button button-theme button-rounded hvr-shutter-in-horizontal">Shutter In Horizontal</a>
<a href="#" class="button button-theme button-rounded hvr-shutter-out-horizontal">Shutter Out Horizontal</a>
<a href="#" class="button button-theme button-rounded hvr-shutter-in-vertical">Shutter In Vertical</a>
<a href="#" class="button button-theme button-rounded hvr-shutter-out-vertical">Shutter Out Vertical</a>
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

Icons (FontAwesome)

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

Border Transitions

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

Shadow and Glow Transitions

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

Speech Bubbles

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

Curls

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

Dropdown View