Membuat tombol css dengan animasi

Dalam desain web ada suatu saat kita memerlukan sedikit penggunaan animasi agar tampilannya lebih menarik. Diantaranya dengan menambahkan efek pada tombol dalam sebuah formulir. Berikut ini salah satu contoh penambahan animasi tombol dengan css.

Ini bagian kode HTML sebagai objek tombol yang akan diberi animasi :

   <!-- Hover #1 -->
   <div class="box-1">
   <div class="btn btn-one">
   <span>HOVER ME</span>
   </div>
   </div>
   
   <!-- Hover #2 -->
   <div class="box-2">
   <div class="btn btn-two">
   <span>HOVER ME</span>
   </div>
   </div>

   <!-- Hover #3 -->
   <div class="box-3">
   <div class="btn btn-three">
   <span>HOVER ME</span>
   </div>
   </div>
 

Ini bagian kode CSS yang digunakan untuk merubah tampilan tombol html :

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-family: 'Open Sans Condensed', sans-serif;
}

div[class*=box] {
	height: 33.33%;
	width: 100%; 
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-1 { background-color: #FF6766; }
.box-2 { background-color: #3C3C3C; }
.box-3 { background-color: #66A182; }

.btn {
	line-height: 50px;
	height: 50px;
	text-align: center;
	width: 250px;
	cursor: pointer;
}

/* 
========================
      TOMBOL PERTAMA
========================
*/
.btn-one {
	color: #FFF;
	transition: all 0.3s;
	position: relative;
}
.btn-one span {
	transition: all 0.3s;
}
.btn-one::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: rgba(255,255,255,0.5);
	border-bottom-color: rgba(255,255,255,0.5);
	transform: scale(0.1, 1);
}
.btn-one:hover span {
	letter-spacing: 2px;
}
.btn-one:hover::before {
	opacity: 1;	
	transform: scale(1, 1);	
}
.btn-one::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition: all 0.3s;
	background-color: rgba(255,255,255,0.1);
}
.btn-one:hover::after {
	opacity: 0;	
	transform: scale(0.1, 1);
}


/* 
========================
      TOMBOL KEDUA
========================
*/
.btn-two {
	color: #FFF;
	transition: all 0.5s;
	position: relative;	
}
.btn-two span {
	z-index: 2;	
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;	
}
.btn-two::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition: all 0.5s;
	border: 1px solid rgba(255,255,255,0.2);
	background-color: rgba(255,255,255,0.1);
}
.btn-two::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition: all 0.5s;
	border: 1px solid rgba(255,255,255,0.2);
	background-color: rgba(255,255,255,0.1);
}
.btn-two:hover::before {
  transform: rotate(-45deg);
  background-color: rgba(255,255,255,0);
}
.btn-two:hover::after {
  transform: rotate(45deg);
  background-color: rgba(255,255,255,0);
}


/* 
========================
      TOMBOL KETIGA
========================
*/
.btn-three {
	color: #FFF;
	transition: all 0.5s;
	position: relative;
}
.btn-three::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	background-color: rgba(255,255,255,0.1);
	transition: all 0.3s;
}
.btn-three:hover::before {
	opacity: 0 ;
	transform: scale(0.5,0.5);
}
.btn-three::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	transition: all 0.3s;
	border: 1px solid rgba(255,255,255,0.5);
	transform: scale(1.2,1.2);
}
.btn-three:hover::after {
	opacity: 1;
	transform: scale(1,1);
}

** Bebas disunting dengan menyebutkan sumber **