A weee css spinning
A Pen by Mattia Astorino on CodePen.
button.tag( | |
data-content-default="TOUCH ME PLEASE" | |
data-content-spinning="WEEEEEEEE" ) |
body { | |
font-family: 'Montserrat', sans-serif; | |
background-color: #651FFF; | |
height: 100vh; | |
display: flex; | |
user-select: none; | |
align-items: center; | |
cursor: pointer; | |
justify-content: center; | |
perspective: 288px; } | |
.tag { | |
position: relative; | |
display: block; | |
background-color: #FFF; | |
font-weight: 700; | |
font-size: 1rem; | |
border: none; | |
outline: none; | |
min-width: 150px; | |
text-align: center; | |
box-sizing: border-box; | |
padding: 4vh 8vw; | |
text-decoration: none; | |
color: #000; | |
letter-spacing: 2px; | |
cursor: -webkit-grab; | |
cursor: -moz-grab; | |
&:before { | |
content: attr( data-content-default ); } | |
&:active { | |
cursor: -webkit-grabbing; | |
cursor: -moz-grabbing; | |
animation: spinner 200ms infinite linear; | |
&:before { | |
content: attr( data-content-spinning ); } | |
} | |
} | |
@keyframes spinner { | |
from { | |
box-shadow: 0 10px 20px rgba( 0,0,0, 0.2 ); | |
transform: rotateX( 0 ) rotateY( -360deg ); } | |
to { | |
box-shadow: 0 10px 20px rgba( 0,0,0, 0.2 ); | |
transform: rotateX( 360deg ) rotateY( -360deg ); } | |
} | |
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" /> |
A weee css spinning
A Pen by Mattia Astorino on CodePen.