Cara Membuat Tombol Efek Seperti Air Bila Disentuh (CSS Ripple Efek) di Blog

Nyampling << N >> Cara Membuat Tombol Efek Seperti Air Bila Disentuh (CSS Ripple Efek) di Blog. Apa itu "Ripple Effect"??. Mungkin anda sudah tidak asing lagi dengan efek Ripple ini, efek ini biasanya banyak digunakan pada pointer mouse. Efek ini akan muncul seperti air yang bergelombang ketika anda mengklik sesuatu, gelombang yang muncul persis seperti air ketika disentuh. Nah, Kebayang kan gimana efeknya ??

Bagi anda yang menginginkan tampilan blog yang keren dan unik maka memasang efek ini sangat direkomendasikan. Karena dapat membuat efek yang keren ketika pengunjung mengklik tombol yang ada pada blog. Sebenarnya efek ini tidak terlalu dipikirkan bagi pengunjung yang hanya fokus pada postingan tetapi akan memberikan keunikan tersendiri bagi blog yang memasang efek ini.

Cara Membuat Material Design Button Ripple Effect Animation Pure CSS

Karena tombol efek ripple hanya dibuat menggunakan CSS, maka kode berikut ini menjadi sangat penting. Tambahkan di pengaturan HTML blog masing-masing.

/* Ripple Effect */
.ripple {
  background-position: center;
  transition: background 0.8s;
}
.ripple:hover {
  background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%;
}
.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
}

/* Button style */
button {
  border: none;
  border-radius: 2px;
  padding: 12px 18px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  color: white;
  background-color: #2196f3;
  box-shadow: 0 0 4px #999;
  outline: none;
}

Setelah itu tuliskan kode HTML ini di tempat kamu menginginkan tombolnya untuk muncul.

<button class="ripple">Button</button>

class="ripple" wajib ditulis agar efek animasinya bekerja. Hasilnya akan seperti dibawah ini. Coba amati, ketika di-klik akan membentuk efek seperti air disentuh yang perlahan-lahan membesar.

Untuk Demo Bisa Dilihat Disini