Hover Master

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.

Documentation for Hover
How to use?

Copy-paste the following <link> near the end of your pages under Nayzak Plugins SCSS to enable it.

                
                  <link href="assets/plugins/hover-master/sass/hover.scss" rel="stylesheet" type="text/css" media="all">

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

Background Transitions

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

Icons Animation

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

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

Border Transitions

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

Curls

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