Weeeeee

index.pug

button.tag(
	data-content-default="TOUCH ME PLEASE"
	data-content-spinning="WEEEEEEEE" )

style.less

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 ); }
}

styles

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" />

weeeeee.markdown

Weeeeee

A weee css spinning

A Pen by Mattia Astorino on CodePen.

License.