.button
	p HOVER ME
View Compiled
.button {
	position: fixed;
	text-align: center;
	font-size: 42px;
	font-family: 'Raleway', sans-serif;
	color: hsl(220, 80%, 50%);
	width: 350px;
	height: 100px;
	margin-top: calc(50vh - 75px);
	margin-left: calc(50vw - 175px);

	border-radius: 30px;
	text-shadow: 
		0px 5px hsl(220, 80%, 30%), 
		0px 10px 10px #0003;
	box-shadow: 
		0px 0px 0px 15px hsl(330, 80%, 50%),
		0px 10px 0px 15px hsl(330, 80%, 40%),
		0px 20px 20px 15px #0003;
	cursor: pointer;
	border-radius: 100px 30px 100px 30px;

}

.button p {
	margin-top: 20px;
	transform: rotate(-3deg);
}

.button:hover {
	animation: .8s morph ease infinite;
}

.button:hover p {
	animation: .8s rot ease infinite;
}

@keyframes morph {
	0% {
		border-radius: 100px 30px 100px 30px;
	} 50% {
		border-radius: 30px 100px 30px 100px;
	} 100% {
		border-radius: 100px 30px 100px 30px;
	}
}

@keyframes rot {
	0% {
		transform: rotate(-3deg);
	} 50% {
		transform: rotate(3deg);
	} 100% {
		transform: rotate(-3deg);
	}
}
// Nops

External CSS

  1. https://fonts.googleapis.com/css?family=Raleway:900

External JavaScript

This Pen doesn't use any external JavaScript resources.