JSFiddle - React, Tailwind, and code Playground

Hover.css

by Jennifer Perrin

HTML

<h1>Hover.css</h1>

<h2>2D Transforms</h2>
	<a rel="grow" class="button grow">Grow</a>
	<a rel="shrink" class="button shrink">Shrink</a>
	<a rel="pulse" class="button pulse">Pulse</a>
	<a rel="pulse-grow" class="button pulse-grow">Pulse Grow</a>
	<a rel="pulse-shrink" class="button pulse-shrink">Pulse Shrink</a>
	<a rel="push" class="button push">Push</a>
	<a rel="pop" class="button pop">Pop</a>
	<a rel="rotate" class="button rotate">Rotate</a>
	<a rel="grow-rotate" class="button grow-rotate">Grow Rotate</a>
	<a rel="float" class="button float">Float</a>
	<a rel="sink" class="button sink">Sink</a>
	<a rel="hover" class="button hover">Hover</a>
	<a rel="hang" class="button hang">Hang</a>
	<a rel="skew" class="button skew">Skew</a>
	<a rel="skew-forward" class="button skew-forward">Skew Forward</a>
	<a rel="wobble-horizontal" class="button wobble-horizontal">Wobble Horizontal</a>
	<a rel="wobble-vertical" class="button wobble-vertical">Wobble Vertical</a>
	<a rel="wobble-top" class="button wobble-top">Wobble Top</a>
	<a rel="wobble-bottom" class="button wobble-bottom">Wobble Bottom</a>

	<h2>Border Transitions</h2>
	<a rel="border-fade" class="button border-fade">Border Fade</a>
	<a rel="hollow" class="button hollow">Hollow</a>
	<a rel="trim" class="button trim">Trim</a>
	<a rel="outline-outward" class="button outline-outward">Outline Outward</a>
	<a rel="outline-inward" class="button outline-inward">Outline Inward</a>
	<a rel="round-corners" class="button round-corners">Round Corners</a>

	<h2>Shadow and Glow Transitions</h2>
	<a rel="glow" class="button glow">Glow</a>
	<a rel="box-shadow-outset" class="button box-shadow-outset">Box Shadow Outset</a>
	<a rel="box-shadow-inset" class="button box-shadow-inset">Box Shadow Inset</a>
	<a rel="float-shadow" class="button float-shadow">Float Shadow</a>
	<a rel="hover-shadow" class="button hover-shadow">Hover Shadow</a>
	<a rel="shadow-radial" class="button shadow-radial">Shadow Radial</a>

	<h2>Speech Bubbles</h2>
	<a...

CSS

/*
 * Hover.css - Demo Page
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014.
 */
 body {
    margin: 0 auto;
    max-width: 800px;
    padding: 20px;
    font-family: sans-serif;
    color: #333;
    line-height: 140%;
}
img {
    border: none;
}
.aligncenter {
    text-align: center;
}
.intro {
    max-width: 680px;
    margin: 0 auto;
}
.button.cta {
    display: inline-block;
    position: relative;
    margin: 2em 0 1em 0;
    padding: 1em;
    background: #2098D1;
    border: none;
    text-decoration: none;
    font-weight: 700;
    color: white;
}
#effects {
    margin-top: 5em;
}
h1 {
    text-align: center;
    font-size: 4em;
}
h2 {
    margin-top: 2em;
}
.about {
    border-top: #333 solid 2px;
    border-bottom: #333 solid 2px;
}
.footer {
    overflow: hidden;
    width: auto;
    margin-top: 6em;
    font-size: .9em;
}
.footer a {
    text-decoration: none;
}
.footer a:hover {
    text-decoration: underline;
}
.social {
    margin-top: 2em;
}
.social-button {
    display: inline-block;
    vertical-align: middle;
}
.author {
    margin: 6em auto 0 auto;
    text-align: center;
    font-weight: 900;
}
#forkongithub a {
    background:#000;
    color:#fff;
    text-decoration:none;
    font-family:arial, sans-serif;
    text-align:center;
    font-weight:bold;
    padding:5px 40px;
    font-size:1rem;
    line-height:2rem;
    position:relative;
    transition:0.5s;
}
#forkongithub a:hover {
    background:#060;
    color:#fff;
}
#forkongithub a::before, #forkongithub a::after {
    content:"";
    width:100%;
    display:block;
    position:absolute;
    top:1px;
    left:0;
    height:1px;
    background:#fff;
}
#forkongithub a::after {
    bottom:1px;
    top:auto;
}
@media screen and (min-width:800px) {
    #forkongithub {
        position:absolute;
       ...

JavaScript

/*
A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration.
From: http://codepen.io/IanLunn/details/hysxc
*/