Cara Membuat Tombol Keren Dengan CSS

Pada kesempatan kali ini, saya akan menjelaskan cara membuat tombol keren dengan CSS. Pada contoh di sini saya menggunakan style google material yang ada.Dan  pada contoh di sini teman-teman bisa membuat efek animasi tombol (button) saat di klik dan menggunakan pseudo elemen :before yang di sisipi dengan efek :hover. Selain itu teman-teman bisa menggunakan property transform, seperti hasil contoh gambar di bawah ini :

Lantas bagaimana cara untuk membuat nya ?

Berikut tahapan nya di bawah ini :

• Teman-teman buat terlebih dahulu satu buah file html dengan nama index.html
• Ketikan kode html seperti kode di bawah ini :

<!DOCTYPE html>
<html>
<head>
<style>

@import url(http://fonts.googleapis.com/css?family=Roboto);
/*---------------Awal kode css tombol---------------*/
.button-container {
  text-align: center;
}
.button {
  position: relative;
  background: currentColor;
  border: 1px solid currentColor;
  font-size: 1.1rem;
  color: #D81900;
  margin: 3rem 0;
  padding: 0.75rem 3rem;
  cursor: pointer;
  -webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.button span {
  color: #fff;
  position: relative;
  z-index: 1;
}
.button::before {
  content: '';
  position: absolute;
  background: #071017;
  border: 50vh solid #1d4567;
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 0;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.button:hover {
  color: #D81900;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.button:active::before, .button:focus::before {
  -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
.button:focus {
  outline: none;
}
/*-----------Akhir kode css tombol-----------*/
</style>

</head>

<body>

<div class="container">
    <div class="button-container">
    <button type="submit" class="button"><span>Tekan Sekarang</span></button>
  </div> 
</div>

</body>
</html>

• Jika sudah save dan lihat hasilnya pada browser teman-teman.
• Untuk warna tombol dapat teman-teman sesuaikan dengan keinginan teman-teman

Sampai di sini penjelasan saya mengenai cara membuat tombol keren dengan CSS, semoga bermanfaat.