Membuat Tombol Efek Animasi Ripple Material Design Menggunakan CSS
Bagi Anda yang belum tahu, Ripple adalah efek seperti air saat disentuh. Pada umumnya tombol dengan efek animasi ripple banyak ditemukan di website yang memiliki desain material. Anda juga bisa membuatnya, dan caranya sangat sederhana. Disini Anda tidak perlu memakai bantuan Javascript agar keberadaan ripple button ini benar-benar ringan. Saya sudah memakainya pada blog lain.
Cara membuat Tombol Efek Animasi Ripple Material Design Menggunakan CSS
Karena tombol efek ripple ini hanya dibuat menggunakan CSS, maka kode berikut ini sangat penting. Anda tambahkan di pengaturan HTML blog masing-masing.
/* Ripple effect by masmalven.com*/
.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;
} Lalu, tuliskan kode HTML ini di tempat kamu menginginkan tombolnya untuk muncul.
<button class="ripple">Button</button> class="ripple" ini wajib ditulis agar efek animasinya bekerja. Untuk hasilnya bisa Anda lihat di Codepen dibawah ini.
Jika hasil akhirnya tidak sesuai dengan contoh diatas maka ada kemungkinan karena bentrok dengan kode CSS sebelumnya yang sudah terpasang di template. Solusinya yaitu hapus saja kode lama dan ganti dengan kode baru yang lebih bagus ini.
Caranya sangat mudah bukan? Hal-hal kecil yang bisa mempercantik tampilan blog sayang jika Anda melewatkannya. Mari segera praktekan cara membuat tombol efek ripple untuk material design diatas agar makin kece lagi...