JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<a href="#" class="hvr-float-shadow">Hover.css</a>

CSS

body { padding: 100px; font-size: 4em }

.hvr-float-shadow {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}

[class^="hvr-"] {
/* display: inline-block; */
/* vertical-align: middle; */
margin: .4em;
padding: 1em .5em;
cursor: pointer;
background: rgba(118, 39, 171, .95);
text-decoration: none;
border-radius: .25em;
color: #fff;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

p, [class^="hvr-"] {
font-family: 'Roboto', sans-serif;
}


.hvr-float-shadow:before {
pointer-events: none;
position: absolute;
z-index: -1;
content: '';
top: 100%;
left: -20%;
height: .7em;
width: 140%;
opacity: 0;
background: -webkit-radial-gradient(center, ellipse, rgba(118, 39, 171, 0.5) 0%, rgba(118, 39, 171, 0) 48%);
background: radial-gradient(ellipse at center, rgba(118, 39, 171, 0.5) 0%, rgba(118, 39, 171, 0) 48%);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform, opacity;
transition-property: transform, opacity;
}

.hvr-float-shadow, .hvr-float-shadow:focus, .hvr-float-shadow:active {
-webkit-transform: translateY(-.5em);
transform: translateY(-.5em);
}

.hvr-float-shadow:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
opacity: 1;
-webkit-transform: translateY(.4em);
transform: translateY(.4em);
}