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.
Jika hasil akhirnya tidak sesuai dengan contoh di atas, ada kemungkinan karena bentrok dengan kode CSS sebelumnya yang sudah terpasang di template kamu. Solusinya hapus saja kode lama karena akan diganti dengan kode baru yang lebih keren ini.
Sudah saya bilang caranya sederhana, bukan? Hal-hal kecil yang bisa mempercantik tampilan blog begini memang sayang untuk dilewatkan. Yuk praktekan cara membuat tombol efek ripple untuk material design diatas. Biar makin kece!
https://codepen.io/finnhvman/pen/jLXKJw