SergProduction/beautiful_button.html

## beautiful_button.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animate button</title>
</head>
<style>
/*
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
*/
@keyframes wave-dissolve {
from {
	width: 70px;
	height: 70px;
	left: 27px;
	top: 27px;
	opacity: 1;
}
90% {
	width: 120px;
	height: 120px;
	left: 2px;
	top: 2px;
	opacity: 0;
}
to {
	opacity: 0;
}
}
@keyframes wave-return {
from {
	width: 64px;
	height: 64px;
	left: 32px;
	top: 32px;
}
to {
	width: 80px;
	height: 80px;
	left: 24px;
	top: 24px;
}
}
.wave-button{
	position: absolute;
	left: 100px;
	top: 100px;
}
.wave-dissolve{
	position: absolute;
	left: 30px;
	top: 30px;
	width: 64px;
	height: 64px;
	border: 2px solid rgba(0, 163, 255, 0.5);
	border-radius: 100%;
	-webkit-animation: wave-dissolve 1.5s linear 0s infinite normal;
	-o-animation: wave-dissolve 1.5s linear 0s infinite normal;
	animation: wave-dissolve 1.5s linear 0s infinite normal;

}
.wave-return{
	position: absolute;
	left: 32px;
	top: 32px;
	background-color: rgba(0, 163, 255, 0.3);
	width: 64px;
	height: 64px;
	border-radius: 100%;
	-webkit-animation: wave-return 0.5s linear 0s infinite alternate;
	-o-animation: wave-return 0.5s linear 0s infinite alternate;
	animation: wave-return 0.5s linear 0s infinite alternate;
}
.wave-content{
	position: absolute;
	left: 32px;
	top: 32px;
	background-color: #00a3e1;
	width: 64px;
	height: 64px;
	border-radius: 100%;

	perspective: 1200;
}
.wave-content:hover .wave-flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}
.wave-flip{
	display: block;
	color: #fff;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;

	-webkit-transition: .7s linear;
	-moz-transition: .7s linear;
	-ms-transition: .7s linear;

}
.wave-front, .wave-back{
	position: absolute;
	top: 20px;
	width: 64px;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
}
.wave-front{
	text-align: center;

	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
}
.wave-back{
	text-align: center;

	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
}
</style>
<script>

</script>
<body>
	<div class="wave-button">
		<div class="wave-dissolve"></div>
		<div class="wave-return"></div>
		<div class="wave-content">
			<div class="wave-flip">
				<div class="wave-front">Front</div>
				<div class="wave-back">Back</div>
			</div>
		</div>
	</div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>animate button</title>
	</head>
	<style>
	/*
	animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
	*/
	@keyframes wave-dissolve {
	from {
	width: 70px;
	height: 70px;
	left: 27px;
	top: 27px;
	opacity: 1;
	}
	90% {
	width: 120px;
	height: 120px;
	left: 2px;
	top: 2px;
	opacity: 0;
	}
	to {
	opacity: 0;
	}
	}
	@keyframes wave-return {
	from {
	width: 64px;
	height: 64px;
	left: 32px;
	top: 32px;
	}
	to {
	width: 80px;
	height: 80px;
	left: 24px;
	top: 24px;
	}
	}
	.wave-button{
	position: absolute;
	left: 100px;
	top: 100px;
	}
	.wave-dissolve{
	position: absolute;
	left: 30px;
	top: 30px;
	width: 64px;
	height: 64px;
	border: 2px solid rgba(0, 163, 255, 0.5);
	border-radius: 100%;
	-webkit-animation: wave-dissolve 1.5s linear 0s infinite normal;
	-o-animation: wave-dissolve 1.5s linear 0s infinite normal;
	animation: wave-dissolve 1.5s linear 0s infinite normal;

	}
	.wave-return{
	position: absolute;
	left: 32px;
	top: 32px;
	background-color: rgba(0, 163, 255, 0.3);
	width: 64px;
	height: 64px;
	border-radius: 100%;
	-webkit-animation: wave-return 0.5s linear 0s infinite alternate;
	-o-animation: wave-return 0.5s linear 0s infinite alternate;
	animation: wave-return 0.5s linear 0s infinite alternate;
	}
	.wave-content{
	position: absolute;
	left: 32px;
	top: 32px;
	background-color: #00a3e1;
	width: 64px;
	height: 64px;
	border-radius: 100%;

	perspective: 1200;
	}
	.wave-content:hover .wave-flip {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	}
	.wave-flip{
	display: block;
	color: #fff;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;

	-webkit-transition: .7s linear;
	-moz-transition: .7s linear;
	-ms-transition: .7s linear;

	}
	.wave-front, .wave-back{
	position: absolute;
	top: 20px;
	width: 64px;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	}
	.wave-front{
	text-align: center;

	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	}
	.wave-back{
	text-align: center;

	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	}
	</style>
	<script>

	</script>
	<body>
	<div class="wave-button">
	<div class="wave-dissolve"></div>
	<div class="wave-return"></div>
	<div class="wave-content">
	<div class="wave-flip">
	<div class="wave-front">Front</div>
	<div class="wave-back">Back</div>
	</div>
	</div>
	</div>
	</body>
	</html>