<!-- Add Hover.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover.css">
<!-- Use in [3] Icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Effect | Class Name |
---|---|
2D Transitions | |
Grow | hvr-grow |
Shrink | hvr-shrink |
Pulse | hvr-pulse |
Pulse Grow | hvr-pulse-grow |
Pulse Shrink | hvr-pulse-shrink |
Push | hvr-push |
Pop | hvr-pop |
Bounce In | hvr-bounce-in |
Bounce Out | hvr-bounce-out |
Rotate | hvr-rotate |
Grow Rotate | hvr-grow-rotate |
Float | hvr-float |
Sink | hvr-sink |
Bob | hvr-bob |
Hang | hvr-hang |
Skew | hvr-skew |
Skew Forward | hvr-skew-forward |
Skew Backward | hvr-skew-backward |
Wobble Horizontal | hvr-wobble-horizontal |
Wobble Vertical | hvr-wobble-vertical |
Wobble To Bottom Right | hvr-wobble-to-bottom-right |
Wobble To Top Right | hvr-wobble-to-top-right |
Wobble Top | hvr-wobble-top |
Wobble Bottom | hvr-wobble-bottom |
Wobble Skew | hvr-wobble-skew |
Buzz | hvr-buzz |
Buzz Out | hvr-buzz-out |
Forward | hvr-forward |
Backward | hvr-backward |
Background Transitions | |
Fade | hvr-fade |
Back Pulse | hvr-back-pulse |
Sweep To Right | hvr-sweep-to-right |
Sweep To Left | hvr-sweep-to-left |
Sweep To Bottom | hvr-sweep-to-bottom |
Sweep To Top | hvr-sweep-to-top |
Bounce To Right | hvr-bounce-to-right |
Bounce To Left | hvr-bounce-to-left |
Bounce To Bottom | hvr-bounce-to-bottom |
Bounce To Top | hvr-bounce-to-top |
Radial Out | hvr-radial-out |
Radial In | hvr-radial-in |
Rectangle In | hvr-rectangle-in |
Rectangle Out | hvr-rectangle-out |
Shutter In Horizontal | hvr-shutter-in-horizontal |
Shutter Out Horizontal | hvr-shutter-out-horizontal |
Shutter In Vertical | hvr-shutter-in-vertical |
Shutter Out Vertical | hvr-shutter-out-vertical |
Icons | |
Icon Back | hvr-icon-back |
Icon Forward | hvr-icon-forward |
Icon Down | hvr-icon-down |
Icon Up | hvr-icon-up |
Icon Spin | hvr-icon-spin |
Icon Drop | hvr-icon-drop |
Icon Fade | hvr-icon-fade |
Icon Float Away | hvr-icon-float-away |
Icon Sink Away | hvr-icon-sink-away |
Icon Grow | hvr-icon-grow |
Icon Shrink | hvr-icon-shrink |
Icon Pulse | hvr-icon-pulse |
Icon Pulse Grow | hvr-icon-pulse-grow |
Icon Pulse Shrink | hvr-icon-pulse-shrink |
Icon Push | hvr-icon-push |
Icon Pop | hvr-icon-pop |
Icon Bounce | hvr-icon-bounce |
Icon Rotate | hvr-icon-rotate |
Icon Grow Rotate | hvr-icon-grow-rotate |
Icon Float | hvr-icon-float |
Icon Sink | hvr-icon-sink |
Icon Bob | hvr-icon-bob |
Icon Hang | hvr-icon-hang |
Icon Wobble Horizontal | hvr-icon-wobble-horizontal |
Icon Wobble Vertical | hvr-icon-wobble-vertical |
Icon Buzz | hvr-icon-buzz |
Icon Buzz Out | hvr-icon-buzz-out |
Border Transitions | |
Border Fade | hvr-border-fade |
Hollow | hvr-hollow |
Trim | hvr-trim |
Ripple Out | hvr-ripple-out |
Ripple In | hvr-ripple-in |
Outline Out | hvr-outline-out |
Outline In | hvr-outline-in |
Round Corners | hvr-round-corners"--> |
Underline From Left | hvr-underline-from-left |
Underline From Center | hvr-underline-from-center |
Underline From Right | hvr-underline-from-right |
Reveal | hvr-reveal |
Underline Reveal | hvr-underline-reveal |
Overline Reveal | hvr-overline-reveal |
Overline From Left | hvr-overline-from-left |
Overline From Center | hvr-overline-from-center |
Overline From Right | hvr-overline-from-right |
Shadow and Glow Transitions | |
Shadow | hvr-shadow |
Grow Shadow | hvr-grow-shadow |
Float Shadow | hvr-float-shadow |
Glow | hvr-glow |
Shadow Radial | hvr-shadow-radial |
Box Shadow Outset | hvr-box-shadow-outset |
Box Shadow Inset | hvr-box-shadow-inset |
Speech Bubbles | |
Bubble Top | hvr-bubble-top |
Bubble Right | hvr-bubble-right |
Bubble Bottom | hvr-bubble-bottom |
Bubble Left | hvr-bubble-left |
Bubble Float Top | hvr-bubble-float-top |
Bubble Float Right | hvr-bubble-float-right |
Bubble Float Bottom | hvr-bubble-float-bottom |
Bubble Float Left | hvr-bubble-float-left |
Curls | |
Curl Top Left | hvr-curl-top-left button |
Curl Top Right | hvr-curl-top-right |
Curl Bottom Right | hvr-curl-bottom-right |
Curl Bottom Left | hvr-curl-bottom-left |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Add Hover.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.1.1/css/hover.css">
<!-- Use in [3] Icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hover.css</title>
<style>
.button {
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 170px;
margin: 5px;
padding: 15px 0;
cursor: pointer;
transition: all .5s;
text-decoration: none;
color: #fff;
border: none;
border-radius: 5px;
background-color: hsl(174, 100%, 29%);
}
.button-cover::before {
border-radius: 5px;
background-color: hsl(174, 100%, 35%);
}
.button-border::before {
border-radius: 5px;
border-color: hsl(174, 100%, 29%);
}
.button-background::before {
background: hsl(174, 100%, 20%);
}
/* [2] Background Transitions */
.hvr-fade:hover,
.hvr-fade:focus,
.hvr-fade:active {
background-color: hsl(174, 100%, 35%);
}
.hvr-back-pulse:hover,
.hvr-back-pulse:focus,
.hvr-back-pulse:active {
background-color: hsl(174, 100%, 35%);
}
/* [4] Border Transitions */
.hvr-border-fade {
box-shadow: inset 0 0 0 4px hsl(174, 100%, 29%), 0 0 1px transparent;
}
.hvr-border-fade:hover,
.hvr-border-fade:focus,
.hvr-border-fade:active {
box-shadow: inset 0 0 0 4px hsl(174, 100%, 20%), 0 0 1px transparent;
}
.hvr-hollow {
box-shadow: inset 0 0 0 4px hsl(174, 100%, 29%), 0 0 1px transparent;
}
.hvr-hollow:hover,
.hvr-hollow:focus,
.hvr-hollow:active {
color: hsl(174, 100%, 29%);
}
.hvr-reveal:before {
border-color: hsl(174, 100%, 20%);
}
/* [6] Speech Bubbles */
.hvr-bubble-top:before,
.hvr-bubble-float-top:before {
border-color: transparent transparent hsl(174, 100%, 29%) transparent;
}
.hvr-bubble-right:before,
.hvr-bubble-float-right:before {
border-color: transparent transparent transparent hsl(174, 100%, 29%);
}
.hvr-bubble-bottom:before,
.hvr-bubble-float-bottom:before {
border-color: hsl(174, 100%, 29%) transparent transparent transparent;
}
.hvr-bubble-left:before,
.hvr-bubble-float-left:before {
border-color: transparent hsl(174, 100%, 29%) transparent transparent;
}
/* [7] Curls */
.hvr-curl-top-left:before {
/* Specify the background color of the parent element */
background: #f1f1f1;
background: linear-gradient(135deg, #f1f1f1 45%, #aaa 50%, #ccc 56%, white 80%);
}
.hvr-curl-top-right:before {
background: #f1f1f1;
background: linear-gradient(225deg, #f1f1f1 45%, #aaa 50%, #ccc 56%, white 80%);
}
.hvr-curl-bottom-right:before {
background: #f1f1f1;
background: linear-gradient(315deg, #f1f1f1 45%, #aaa 50%, #ccc 56%, white 80%);
}
.hvr-curl-bottom-left:before {
background: #f1f1f1;
background: linear-gradient(45deg, #f1f1f1 45%, #aaa 50%, #ccc 56%, white 80%);
}
</style>
</head>
<body>
<header>
<h1 class="dlw-title">Hover.css</h1>
<p class="dlw-description">Hover.css is a style-sheet collection of hover effects.</p>
</header>
<section>
<h2 class="dlw-subtitle">[1] 2D Transitions</h2>
<p>Over on the button to play.</p>
<!-- Grow: Add Class "hvr-grow" -->
<a href="#" class="hvr-grow button">Grow</a>
<!-- Shrink: Add Class "hvr-shrink" -->
<a href="#" class="hvr-shrink button">Shrink</a>
<!-- Pulse: Add Class "hvr-pulse" -->
<a href="#" class="hvr-pulse button">Pulse</a>
<!-- Pulse Grow: Add Class "hvr-pulse-grow" -->
<a href="#" class="hvr-pulse-grow button">Pulse Grow</a>
<!-- Pulse Shrink: Add Class "hvr-pulse-shrink" -->
<a href="#" class="hvr-pulse-shrink button">Pulse Shrink</a>
<!-- Push: Add Class "hvr-push" -->
<a href="#" class="hvr-push button">Push</a>
<!-- Pop: Add Class "hvr-pop" -->
<a href="#" class="hvr-pop button">Pop</a>
<!-- Bounce In: Add Class "hvr-bounce-in" -->
<a href="#" class="hvr-bounce-in button">Bounce In</a>
<!-- Bounce Out: Add Class "hvr-bounce-out" -->
<a href="#" class="hvr-bounce-out button">Bounce Out</a>
<!-- Rotate: Add Class "hvr-rotate" -->
<a href="#" class="hvr-rotate button">Rotate</a>
<!-- Grow Rotate: Add Class "hvr-grow-rotate" -->
<a href="#" class="hvr-grow-rotate button">Grow Rotate</a>
<!-- Float: Add Class "hvr-float" -->
<a href="#" class="hvr-float button">Float</a>
<!-- Sink: Add Class "hvr-sink" -->
<a href="#" class="hvr-sink button">Sink</a>
<!-- Bob: Add Class "hvr-bob" -->
<a href="#" class="hvr-bob button">Bob</a>
<!-- Hang: Add Class "hvr-hang" -->
<a href="#" class="hvr-hang button">Hang</a>
<!-- Skew: Add Class "hvr-skew" -->
<a href="#" class="hvr-skew button">Skew</a>
<!-- Skew Forward: Add Class "hvr-skew-forward" -->
<a href="#" class="hvr-skew-forward button">Skew Forward</a>
<!-- Skew Backward: Add Class "hvr-skew-backward" -->
<a href="#" class="hvr-skew-backward button">Skew Backward</a>
<!-- Wobble Horizontal: Add Class "hvr-wobble-horizontal" -->
<a href="#" class="hvr-wobble-horizontal button">Wobble Horizontal</a>
<!-- Wobble Vertical: Add Class "hvr-wobble-vertical" -->
<a href="#" class="hvr-wobble-vertical button">Wobble Vertical</a>
<!-- Wobble To Bottom Right: Add Class "hvr-wobble-to-bottom-right" -->
<a href="#" class="hvr-wobble-to-bottom-right button">Wobble To Bottom Right</a>
<!-- Wobble To Top Right: Add Class "hvr-wobble-to-top-right" -->
<a href="#" class="hvr-wobble-to-top-right button">Wobble To Top Right</a>
<!-- Wobble Top: Add Class "hvr-wobble-top" -->
<a href="#" class="hvr-wobble-top button">Wobble Top</a>
<!-- Wobble Bottom: Add Class "hvr-wobble-bottom" -->
<a href="#" class="hvr-wobble-bottom button">Wobble Bottom</a>
<!-- Wobble Skew: Add Class "hvr-wobble-skew" -->
<a href="#" class="hvr-wobble-skew button">Wobble Skew</a>
<!-- Buzz: Add Class "hvr-buzz" -->
<a href="#" class="hvr-buzz button">Buzz</a>
<!-- Buzz Out: Add Class "hvr-buzz-out" -->
<a href="#" class="hvr-buzz-out button">Buzz Out</a>
<!-- Forward: Add Class "hvr-forward" -->
<a href="#" class="hvr-forward button">Forward</a>
<!-- Backward: Add Class "hvr-backward" -->
<a href="#" class="hvr-backward button">Backward</a>
</section>
<section>
<h2 class="dlw-subtitle">[2] Background Transitions</h2>
<p>Over on the button to play.</p>
<!-- Fade: Add Class "hvr-fade" -->
<a href="#" class="hvr-fade button">Fade</a>
<!-- Back Pulse: Add Class "hvr-back-pulse" -->
<a href="#" class="hvr-back-pulse button">Back Pulse</a>
<!-- Sweep To Right: Add Class "hvr-sweep-to-right" -->
<a href="#" class="hvr-sweep-to-right button button-cover">Sweep To Right</a>
<!-- Sweep To Left: Add Class "hvr-sweep-to-left" -->
<a href="#" class="hvr-sweep-to-left button button-cover">Sweep To Left</a>
<!-- Sweep To Bottom: Add Class "hvr-sweep-to-bottom" -->
<a href="#" class="hvr-sweep-to-bottom button button-cover">Sweep To Bottom</a>
<!-- Sweep To Top: Add Class "hvr-sweep-to-top" -->
<a href="#" class="hvr-sweep-to-top button button-cover">Sweep To Top</a>
<!-- Bounce To Right: Add Class "hvr-bounce-to-right" -->
<a href="#" class="hvr-bounce-to-right button button-cover">Bounce To Right</a>
<!-- Bounce To Left: Add Class "hvr-bounce-to-left" -->
<a href="#" class="hvr-bounce-to-left button button-cover">Bounce To Left</a>
<!-- Bounce To Bottom: Add Class "hvr-bounce-to-bottom" -->
<a href="#" class="hvr-bounce-to-bottom button button-cover">Bounce To Bottom</a>
<!-- Bounce To Top: Add Class "hvr-bounce-to-top" -->
<a href="#" class="hvr-bounce-to-top button button-cover">Bounce To Top</a>
<!-- Radial Out: Add Class "hvr-radial-out" -->
<a href="#" class="hvr-radial-out button button-cover">Radial Out</a>
<!-- Radial In: Add Class "hvr-radial-in" -->
<a href="#" class="hvr-radial-in button button-cover">Radial In</a>
<!-- Rectangle In: Add Class "hvr-rectangle-in" -->
<a href="#" class="hvr-rectangle-in button button-cover">Rectangle In</a>
<!-- Rectangle Out: Add Class "hvr-rectangle-out" -->
<a href="#" class="hvr-rectangle-out button button-cover">Rectangle Out</a>
<!-- Shutter In Horizontal: Add Class "hvr-shutter-in-horizontal" -->
<a href="#" class="hvr-shutter-in-horizontal button button-cover">Shutter In Horizontal</a>
<!-- Shutter Out Horizontal: Add Class "hvr-shutter-out-horizontal" -->
<a href="#" class="hvr-shutter-out-horizontal button button-cover">Shutter Out Horizontal</a>
<!-- Shutter In Vertical: Add Class "hvr-shutter-in-vertical" -->
<a href="#" class="hvr-shutter-in-vertical button button-cover">Shutter In Vertical</a>
<!-- Shutter Out Vertical: Add Class "hvr-shutter-out-vertical" -->
<a href="#" class="hvr-shutter-out-vertical button button-cover">Shutter Out Vertical</a>
</section>
<section>
<h2 class="dlw-subtitle">[3] Icons</h2>
<p>Over on the button to play.<br><a href="http://fontawesome.io/" target="_blank">Font Awesome</a> required.</p>
<!-- Icon Back: Add Class "hvr-icon-back" -->
<a href="#" class="hvr-icon-back button">Icon Back</a>
<!-- Icon Forward: Add Class "hvr-icon-forward" -->
<a href="#" class="hvr-icon-forward button">Icon Forward</a>
<!-- Icon Down: Add Class "hvr-icon-down" -->
<a href="#" class="hvr-icon-down button">Icon Down</a>
<!-- Icon Up: Add Class "hvr-icon-up" -->
<a href="#" class="hvr-icon-up button">Icon Up</a>
<!-- Icon Spin: Add Class "hvr-icon-spin" -->
<a href="#" class="hvr-icon-spin button">Icon Spin</a>
<!-- Icon Drop: Add Class "hvr-icon-drop" -->
<a href="#" class="hvr-icon-drop button">Icon Drop</a>
<!-- Icon Fade: Add Class "hvr-icon-fade" -->
<a href="#" class="hvr-icon-fade button">Icon Fade</a>
<!-- Icon Float Away: Add Class "hvr-icon-float-away" -->
<a href="#" class="hvr-icon-float-away button">Icon Float Away</a>
<!-- Icon Sink Away: Add Class "hvr-icon-sink-away" -->
<a href="#" class="hvr-icon-sink-away button">Icon Sink Away</a>
<!-- Icon Grow: Add Class "hvr-icon-grow" -->
<a href="#" class="hvr-icon-grow button">Icon Grow</a>
<!-- Icon Shrink: Add Class "hvr-icon-shrink" -->
<a href="#" class="hvr-icon-shrink button">Icon Shrink</a>
<!-- Icon Pulse: Add Class "hvr-icon-pulse" -->
<a href="#" class="hvr-icon-pulse button">Icon Pulse</a>
<!-- Icon Pulse Grow: Add Class "hvr-icon-pulse-grow" -->
<a href="#" class="hvr-icon-pulse-grow button">Icon Pulse Grow</a>
<!-- Icon Pulse Shrink: Add Class "hvr-icon-pulse-shrink" -->
<a href="#" class="hvr-icon-pulse-shrink button">Icon Pulse Shrink</a>
<!-- Icon Push: Add Class "hvr-icon-push" -->
<a href="#" class="hvr-icon-push button">Icon Push</a>
<!-- Icon Pop: Add Class "hvr-icon-pop" -->
<a href="#" class="hvr-icon-pop button">Icon Pop</a>
<!-- Icon Bounce: Add Class "hvr-icon-bounce" -->
<a href="#" class="hvr-icon-bounce button">Icon Bounce</a>
<!-- Icon Rotate: Add Class "hvr-icon-rotate" -->
<a href="#" class="hvr-icon-rotate button">Icon Rotate</a>
<!-- Icon Grow Rotate: Add Class "hvr-icon-grow-rotate" -->
<a href="#" class="hvr-icon-grow-rotate button">Icon Grow Rotate</a>
<!-- Icon Float: Add Class "hvr-icon-float" -->
<a href="#" class="hvr-icon-float button">Icon Float</a>
<!-- Icon Sink: Add Class "hvr-icon-sink" -->
<a href="#" class="hvr-icon-sink button">Icon Sink</a>
<!-- Icon Bob: Add Class "hvr-icon-bob" -->
<a href="#" class="hvr-icon-bob button">Icon Bob</a>
<!-- Icon Hang: Add Class "hvr-icon-hang" -->
<a href="#" class="hvr-icon-hang button">Icon Hang</a>
<!-- Icon Wobble Horizontal: Add Class "hvr-icon-wobble-horizontal" -->
<a href="#" class="hvr-icon-wobble-horizontal button">Icon Wobble Horizontal</a>
<!-- Icon Wobble Vertical: Add Class "hvr-icon-wobble-vertical" -->
<a href="#" class="hvr-icon-wobble-vertical button">Icon Wobble Vertical</a>
<!-- Icon Buzz: Add Class "hvr-icon-buzz" -->
<a href="#" class="hvr-icon-buzz button">Icon Buzz</a>
<!-- Icon Buzz Out: Add Class "hvr-icon-buzz-out" -->
<a href="#" class="hvr-icon-buzz-out button">Icon Buzz Out</a>
</section>
<section>
<h2 class="dlw-subtitle">[4] Border Transitions</h2>
<p>Over on the button to play.</p>
<!-- Border Fade: Add Class "hvr-border-fade" -->
<a href="#" class="hvr-border-fade button">Border Fade</a>
<!-- Hollow: Add Class "hvr-hollow" -->
<a href="#" class="hvr-hollow button">Hollow</a>
<!-- Trim: Add Class "hvr-trim" -->
<a href="#" class="hvr-trim button">Trim</a>
<!-- Ripple Out: Add Class "hvr-ripple-out" -->
<a href="#" class="hvr-ripple-out button button-border">Ripple Out</a>
<!-- Ripple In: Add Class "hvr-ripple-in" -->
<a href="#" class="hvr-ripple-in button button-border">Ripple In</a>
<!-- Outline Out: Add Class "hvr-outline-out" -->
<a href="#" class="hvr-outline-out button button-border">Outline Out</a>
<!-- Outline In: Add Class "hvr-outline-in" -->
<a href="#" class="hvr-outline-in button button-border">Outline In</a>
<!-- Round Corners: Add Class "hvr-round-corners"-->
<a href="#" class="hvr-round-corners button">Round Corners</a>
<!-- Underline From Left: Add Class "hvr-underline-from-left" -->
<a href="#" class="hvr-underline-from-left button button-background">Underline From Left</a>
<!-- Underline From Center: Add Class "hvr-underline-from-center" -->
<a href="#" class="hvr-underline-from-center button button-background">Underline From Center</a>
<!-- Underline From Right: Add Class "hvr-underline-from-right" -->
<a href="#" class="hvr-underline-from-right button button-background">Underline From Right</a>
<!-- Reveal: Add Class "hvr-reveal" -->
<a href="#" class="hvr-reveal button">Reveal</a>
<!-- Underline Reveal: Add Class "hvr-underline-reveal" -->
<a href="#" class="hvr-underline-reveal button button-background">Underline Reveal</a>
<!-- Overline Reveal: Add Class "hvr-overline-reveal" -->
<a href="#" class="hvr-overline-reveal button button-background">Overline Reveal</a>
<!-- Overline From Left: Add Class "hvr-overline-from-left" -->
<a href="#" class="hvr-overline-from-left button button-background">Overline From Left</a>
<!-- Overline From Center: Add Class "hvr-overline-from-center" -->
<a href="#" class="hvr-overline-from-center button button-background">Overline From Center</a>
<!-- Overline From Right: Add Class "hvr-overline-from-right" -->
<a href="#" class="hvr-overline-from-right button button-background">Overline From Right</a>
</section>
<section>
<h2 class="dlw-subtitle">[5] Shadow and Glow Transitions</h2>
<p>Over on the button to play.</p>
<!-- Shadow: Add Class "hvr-shadow" -->
<a href="#" class="hvr-shadow button">Shadow</a>
<!-- Grow Shadow: Add Class "hvr-grow-shadow" -->
<a href="#" class="hvr-grow-shadow button">Grow Shadow</a>
<!-- Float Shadow: Add Class "hvr-float-shadow" -->
<a href="#" class="hvr-float-shadow button">Float Shadow</a>
<!-- Glow: Add Class "hvr-glow" -->
<a href="#" class="hvr-glow button">Glow</a>
<!-- Shadow Radial: Add Class "hvr-shadow-radial" -->
<a href="#" class="hvr-shadow-radial button">Shadow Radial</a>
<!-- Box Shadow Outset: Add Class "hvr-box-shadow-outset" -->
<a href="#" class="hvr-box-shadow-outset button">Box Shadow Outset</a>
<!-- Box Shadow Inset: Add Class "hvr-box-shadow-inset" -->
<a href="#" class="hvr-box-shadow-inset button">Box Shadow Inset</a>
</section>
<section>
<h2 class="dlw-subtitle">[6] Speech Bubbles</h2>
<p>Over on the button to play.</p>
<!-- Bubble Top: Add Class "hvr-bubble-top" -->
<a href="#" class="hvr-bubble-top button">Bubble Top</a>
<!-- Bubble Right: Add Class "hvr-bubble-right" -->
<a href="#" class="hvr-bubble-right button">Bubble Right</a>
<!-- Bubble Bottom: Add Class "hvr-bubble-bottom" -->
<a href="#" class="hvr-bubble-bottom button">Bubble Bottom</a>
<!-- Bubble Left: Add Class "hvr-bubble-left" -->
<a href="#" class="hvr-bubble-left button">Bubble Left</a>
<!-- Bubble Float Top: Add Class "hvr-bubble-float-top" -->
<a href="#" class="hvr-bubble-float-top button">Bubble Float Top</a>
<!-- Bubble Float Right: Add Class "hvr-bubble-float-right" -->
<a href="#" class="hvr-bubble-float-right button">Bubble Float Right</a>
<!-- Bubble Float Bottom: Add Class "hvr-bubble-float-bottom" -->
<a href="#" class="hvr-bubble-float-bottom button">Bubble Float Bottom</a>
<!-- Bubble Float Left: Add Class "hvr-bubble-float-left" -->
<a href="#" class="hvr-bubble-float-left button">Bubble Float Left</a>
</section>
<section>
<h2 class="dlw-subtitle">[7] Curls</h2>
<p>Over on the button to play.</p>
<!-- Curl Top Left: Add Class "hvr-curl-top-left button" -->
<a href="#" class="hvr-curl-top-left button">Curl Top Left</a>
<!-- Curl Top Right: Add Class "hvr-curl-top-right" -->
<a href="#" class="hvr-curl-top-right button">Curl Top Right</a>
<!-- Curl Bottom Right: Add Class "hvr-curl-bottom-right" -->
<a href="#" class="hvr-curl-bottom-right button">Curl Bottom Right</a>
<!-- Curl Bottom Left: Add Class "hvr-curl-bottom-left" -->
<a href="#" class="hvr-curl-bottom-left button">Curl Bottom Left</a>
</section>
</body>
</html>
Here, design samples of various effects to text are posted.
The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.
The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.
Using
In this example, Picturefill is added for IE.
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.
Flex is the value of the CSS display property.
It is a standard button design of Bootstrap Framework.
Hover.css is a style-sheet collection of hover effects.
Button.css is collection of CSS3 button animations.
It is a standard Card design of Bootstrap Framework.
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.
Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
FitText.js is jQuery plugin that fits the font size according to the width of the parent element.
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.
Introduction of various embedment methods of YouTube.
FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.
xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom.
Instagram.css is a stylesheet set that filters photos like instagram.
Moment.js is a javascript that processes and displays date and time.
Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.
Multifilter is jQuery Table Filtering Plugin.
Responsive table using "display: flex;".
Not supported for rowspan.
Responsive table using "display: grid;".
Not supported for rowspan.
It is a standard Table design of Bootstrap Framework.
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.
jQuery Searcher is jQuery search/filtering plugin that supports various markups.
It is a standard Carousel of Bootstrap Framework.
FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.
jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.
metisMenu is a jQuery plugin that expands vertical and vertical menus.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.
Scrolla is jQuery scroll animation plugin.
Hover.css is a style-sheet collection of hover effects.
Animate.css is a style-sheet collection of animation effects.
jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..
jQuery.mb.YTPlayer is jQuery Background player plugin.
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.
It is a standard Carousel of Bootstrap Framework.
It is a standard Card design of Bootstrap Framework.
It is a standard button design of Bootstrap Framework.
It is a standard Table design of Bootstrap Framework.
HTML5 Cheat Sheet by Make A Website Hub
CSS3 Cheat Sheet by Smashing Magazine
This is the Visual Studio Code default keyboard shortcut list.
Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.
On this page you can search for codes collectively.
It is a news feed about design.