Style Switcher
Theme Colors
Header Color
  • support@ecada.com
  • (0123)-123-456-789

Theme components

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