Membuat Ripple Effect Button pada Website

Hai Software Knights, kali ini kita akan belajar cara membuat Ripple Effect Button pada website menggunakan HTML, CSS, dan Javascript.

Sebelumnya, kenapa kita membuat ripple effect pada button ? ripple effect adalah effect seperti riak air saat disentuh. Fungsi dari diberikannya effect ini pada button agar ketika user men-click suatu button, maka user akan diberi feedback bahwa button tersebut telah di-click.

Jika tidak diberi feedback, bisa saja user beranggapan dia salah men-click. Bisa juga karena tidak mendapat feedback, user men-click kembali button tersebut yang sebetulnya sedang menjalankan proses dari click sebelumnya (jadi double proses deh hehe…)

Animasi ripple effect ini biasanya banyak digunakan pada website yang memiliki design material. Tapi tenang saja, walau tidak menggunakan desain material pun tetap bisa diberi animasi ripple effect kok ~

Caranya cukup sederhana, kita menggunakan bantuan javasciprt untuk menambahkan suatu class pada button yang di-click

Set Up

CSS

pertama, buat script css ini pada file css di project mu :

/*button*/
button .ripple {
 border-radius: 50%;
 background-color: rgba(255, 255, 255, 0.7);
 position: absolute;
 transform: scale(0);
 animation: ripple 0.6s linear;
}
@keyframes ripple {
 to {
 transform: scale(2.5);
 opacity: 0;
 }
}

Javascript

kemudian, buat sciprt javascript ini pada file javascript di project mu :

var buttons = document.getElementsByTagName(‘button’);
Array.prototype.forEach.call(buttons, function (b) {
 b.addEventListener(‘click’, createRipple);
});
function createRipple (e) {
 var circle = document.createElement(‘div’);
 this.appendChild(circle);
 var d = Math.max(this.clientWidth, this.clientHeight);
 circle.style.width = circle.style.height = d + ‘px’;
 var rect = this.getBoundingClientRect();
 circle.style.left = e.clientX — rect.left -d/2 + ‘px’;
 circle.style.top = e.clientY — rect.top — d/2 + ‘px’;
 circle.classList.add(‘ripple’);
}

Penggunaan

Menggunakannya cukup mudah, cukup buat script HTML untuk button seperti biasa

<button type=”button”>ini button</button>

Demo

Jadi bagaimana, cukup mudah bukan ? kalau ada yang mau ditanyakan bisa ditulis dikolom komentar ~

Sekian untuk tutorial Membuat Ripple Effect Button pada Website. Semoga bermanfaat, terima kasih.

Chevalier Lab
We code, we share, we create.

Referensi : https://material.io/develop/web/components/ripples/