Documents

Title
Hover.css
Description
Hover.css is a style-sheet collection of hover effects.
Category
Animation
Link & Button
Library
Hover.css
Include Files
<!-- 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">
Attachment Table

Hover.css Effects

EffectClass Name
2D Transitions
Growhvr-grow
Shrinkhvr-shrink
Pulsehvr-pulse
Pulse Growhvr-pulse-grow
Pulse Shrinkhvr-pulse-shrink
Pushhvr-push
Pophvr-pop
Bounce Inhvr-bounce-in
Bounce Outhvr-bounce-out
Rotatehvr-rotate
Grow Rotatehvr-grow-rotate
Floathvr-float
Sinkhvr-sink
Bobhvr-bob
Hanghvr-hang
Skewhvr-skew
Skew Forwardhvr-skew-forward
Skew Backwardhvr-skew-backward
Wobble Horizontalhvr-wobble-horizontal
Wobble Verticalhvr-wobble-vertical
Wobble To Bottom Righthvr-wobble-to-bottom-right
Wobble To Top Righthvr-wobble-to-top-right
Wobble Tophvr-wobble-top
Wobble Bottomhvr-wobble-bottom
Wobble Skewhvr-wobble-skew
Buzzhvr-buzz
Buzz Outhvr-buzz-out
Forwardhvr-forward
Backwardhvr-backward
Background Transitions
Fadehvr-fade
Back Pulsehvr-back-pulse
Sweep To Righthvr-sweep-to-right
Sweep To Lefthvr-sweep-to-left
Sweep To Bottomhvr-sweep-to-bottom
Sweep To Tophvr-sweep-to-top
Bounce To Righthvr-bounce-to-right
Bounce To Lefthvr-bounce-to-left
Bounce To Bottomhvr-bounce-to-bottom
Bounce To Tophvr-bounce-to-top
Radial Outhvr-radial-out
Radial Inhvr-radial-in
Rectangle Inhvr-rectangle-in
Rectangle Outhvr-rectangle-out
Shutter In Horizontalhvr-shutter-in-horizontal
Shutter Out Horizontalhvr-shutter-out-horizontal
Shutter In Verticalhvr-shutter-in-vertical
Shutter Out Verticalhvr-shutter-out-vertical
Icons
Icon Backhvr-icon-back
Icon Forwardhvr-icon-forward
Icon Downhvr-icon-down
Icon Uphvr-icon-up
Icon Spinhvr-icon-spin
Icon Drophvr-icon-drop
Icon Fadehvr-icon-fade
Icon Float Awayhvr-icon-float-away
Icon Sink Awayhvr-icon-sink-away
Icon Growhvr-icon-grow
Icon Shrinkhvr-icon-shrink
Icon Pulsehvr-icon-pulse
Icon Pulse Growhvr-icon-pulse-grow
Icon Pulse Shrinkhvr-icon-pulse-shrink
Icon Pushhvr-icon-push
Icon Pophvr-icon-pop
Icon Bouncehvr-icon-bounce
Icon Rotatehvr-icon-rotate
Icon Grow Rotatehvr-icon-grow-rotate
Icon Floathvr-icon-float
Icon Sinkhvr-icon-sink
Icon Bobhvr-icon-bob
Icon Hanghvr-icon-hang
Icon Wobble Horizontalhvr-icon-wobble-horizontal
Icon Wobble Verticalhvr-icon-wobble-vertical
Icon Buzzhvr-icon-buzz
Icon Buzz Outhvr-icon-buzz-out
Border Transitions
Border Fadehvr-border-fade
Hollowhvr-hollow
Trimhvr-trim
Ripple Outhvr-ripple-out
Ripple Inhvr-ripple-in
Outline Outhvr-outline-out
Outline Inhvr-outline-in
Round Cornershvr-round-corners"-->
Underline From Lefthvr-underline-from-left
Underline From Centerhvr-underline-from-center
Underline From Righthvr-underline-from-right
Revealhvr-reveal
Underline Revealhvr-underline-reveal
Overline Revealhvr-overline-reveal
Overline From Lefthvr-overline-from-left
Overline From Centerhvr-overline-from-center
Overline From Righthvr-overline-from-right
Shadow and Glow Transitions
Shadowhvr-shadow
Grow Shadowhvr-grow-shadow
Float Shadowhvr-float-shadow
Glowhvr-glow
Shadow Radialhvr-shadow-radial
Box Shadow Outsethvr-box-shadow-outset
Box Shadow Insethvr-box-shadow-inset
Speech Bubbles
Bubble Tophvr-bubble-top
Bubble Righthvr-bubble-right
Bubble Bottomhvr-bubble-bottom
Bubble Lefthvr-bubble-left
Bubble Float Tophvr-bubble-float-top
Bubble Float Righthvr-bubble-float-right
Bubble Float Bottomhvr-bubble-float-bottom
Bubble Float Lefthvr-bubble-float-left
Curls
Curl Top Lefthvr-curl-top-left button
Curl Top Righthvr-curl-top-right
Curl Bottom Righthvr-curl-bottom-right
Curl Bottom Lefthvr-curl-bottom-left
Related
Animate.css

Animate.css is a style-sheet collection of animation effects.

Bootstrap Button

It is a standard button design of Bootstrap Framework.

Button.css

Button.css is collection of CSS3 button animations.

Source Code

<!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>

Comment

Search

Style Design
Text Style DesignCSS

Here, design samples of various effects to text are posted.

Headline (Heading) Style DesignCSS

The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.

OL (Ordered List) Style DesignCSS

The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.

HR (Separator Line) Style DesignCSS

The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.

Box Shadow Style DesignCSS

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.

Layout
How to specify a breakpoint and switch imagesJS

Using <picture> and srcset, it is a method of switching images according to screen size. It also corresponds to retina.
In this example, Picturefill is added for IE.

Grid LayoutCSS

Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.

FlexCSS

Flex is the value of the CSS display property.

Link & Button
Bootstrap ButtonCSS

It is a standard button design of Bootstrap Framework.

Hover.cssCSS

Hover.css is a style-sheet collection of hover effects.

Button.cssCSS

Button.css is collection of CSS3 button animations.

Card
Bootstrap CardCSS

It is a standard Card design of Bootstrap Framework.

Text
Arctext.jsjQuery

Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.

Lettering.jsjQuery

Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.

Textillate.jsjQuery

Textillate.js is a jQuery plugin that adds In / Out animation effects to text.

FitText.jsjQuery

FitText.js is jQuery plugin that fits the font size according to the width of the parent element.

Media
FeedEkjQuery

FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.

YouTube Embed

Introduction of various embedment methods of YouTube.

FitVids.jsjQuery

FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.

xZoomjQuery

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.cssCSS

Instagram.css is a stylesheet set that filters photos like instagram.

Date
Moment.jsJS

Moment.js is a javascript that processes and displays date and time.

Bootstrap Material DatePickerjQuery

Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.

Table
MultifilterjQuery

Multifilter is jQuery Table Filtering Plugin.

Flex TableCSS

Responsive table using "display: flex;".
Not supported for rowspan.

Grid TableCSS

Responsive table using "display: grid;".
Not supported for rowspan.

Bootstrap TableCSS

It is a standard Table design of Bootstrap Framework.

Form
jQuery Mask PluginjQuery

jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.

Select2 #1. Basic SettingjQuery

Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.

jQuery SearcherjQuery

jQuery Searcher is jQuery search/filtering plugin that supports various markups.

Slider
Bootstrap CarouseljQuery

It is a standard Carousel of Bootstrap Framework.

FlexSlider #1. Single SliderjQuery

FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.

FlexSlider #2. Carousel SliderjQuery

FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.

slick #1. Single SliderjQuery

slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.

slick #2. Carousel SliderjQuery

slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.

Lightbox
fancyBox #1. basic image lightboxjQuery

fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.

fancyBox #2. media lightboxjQuery

fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.

Magnific Popup #1. basic image lightboxjQuery

Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.

Magnific Popup #2. media lightboxjQuery

Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.

Magnific Popup #3. CSS3-based animation effectsjQuery

Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.

Navigation
animsitionjQuery

animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.

GreedyNavjQuery

GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.

GridTabjQuery

GridTab is a lightweight jQuery plugin to create grid based responsive tabs.

jQuery.NiceScrolljQuery

jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.

metisMenujQuery

metisMenu is a jQuery plugin that expands vertical and vertical menus.

fullPage.js #1. basic fullscreen scrollingjQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.

fullPage.js #2. fullscreen scrolling with menujQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..

Offside.js #1. Basic Off-canvasJS

Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.

Offside.js #2. Multiple Off-canvasJS

Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.

Filterizr #1. Basic FilteringjQuery

Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.

Filterizr #2. Advanced FilteringjQuery

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.

Animation
animsitionjQuery

animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.

Textillate.jsjQuery

Textillate.js is a jQuery plugin that adds In / Out animation effects to text.

ScrollajQuery

Scrolla is jQuery scroll animation plugin.

Hover.cssCSS

Hover.css is a style-sheet collection of hover effects.

Animate.cssCSS

Animate.css is a style-sheet collection of animation effects.

jQuery Easing PluginjQuery

jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.

Background
fullPage.js #1. basic fullscreen scrollingjQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.

fullPage.js #2. fullscreen scrolling with menujQuery

fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..

jquery.mb.YTPlayerjQuery

jQuery.mb.YTPlayer is jQuery Background player plugin.

Modal / Tooltip
Hint.cssCSS

Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.

ProtipjQuery

Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.

Social
Framework
Bootstrap CarouseljQuery

It is a standard Carousel of Bootstrap Framework.

Bootstrap CardCSS

It is a standard Card design of Bootstrap Framework.

Bootstrap ButtonCSS

It is a standard button design of Bootstrap Framework.

Bootstrap TableCSS

It is a standard Table design of Bootstrap Framework.

Cheat Sheet
HTML5 Cheat Sheet

HTML5 Cheat Sheet by Make A Website Hub

CSS3 Cheat Sheet

CSS3 Cheat Sheet by Smashing Magazine

Visual Studio Code Keyboard Shortcuts

This is the Visual Studio Code default keyboard shortcut list.

GreenSock Cheat Sheet

Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.

Other
Google Search

On this page you can search for codes collectively.

Design News

It is a news feed about design.