Tombol dengan Efek Animasi Ripple Material Design Menggunakan CSS

Cara membuat dan memasang tombol dengan efek animasi ripple (air disentuh) seperti material design hanya dengan CSS. Material design button ripple effect animation pure CSS3.
Ripple adalah efek seperti air disentuh. Umumnya tombol dengan efek animasi ripple banyak ditemukan di website yang memiliki desain Material. Kamu pun bisa kok membuatnya, caranya pun sangat sederhana. Kita tidak akan pakai bantuan Javascript agar keberadaan ripple button ini benar-benar ringan. Saya sudah memakainya pada template premium Igniplex.

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
6
Tombol dengan Efek Animasi Ripple Material Design Menggunakan CSS
Tombol dengan Efek Animasi Ripple Material Design Menggunakan CSS
Cara membuat dan memasang tombol dengan efek animasi ripple (air disentuh) seperti material design hanya dengan CSS. Material design button ripple effect animation pure CSS3.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

6 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • Andi Suardi Nasa
    25 Oktober, 2023
    Profil: https://www.blogger.com/profile/04614188634593932289
    Hallo kak Igniel, kalo membuat teks bergetar getar kalo di sentuh seperti gambar foto polaroid itu ya kak... tutor dong kak. Terimakasih sehat terus kak
  • Reynaldi Megah Miko
    03 Juni, 2019
    Profil: https://www.blogger.com/profile/09132691603728748270
    Cara membuat kotak script program kayak disini? Bagaimana cara membuatnya?

    Terimakasih ....
    • Igniel
      04 Juni, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Syntax highlighter cek:
      https://www.igniel.com/2018/08/syntax-highlighter-blog-css.html
    • Reynaldi Megah Miko
      05 Juni, 2019
      Profil: https://www.blogger.com/profile/09132691603728748270
      Terima kasih sudah menjawab...

      Kalau boleh tahu, misalnya kotak scriptnya di tambah icon seperti disini kayak gimana ya, contohnya dikotak script html itu kan ada ikon logo html, bagaimana buat nya ya ?

      Kalau di google, kata kunci apa yang saya cari seperti contoh saya?

      Terima kasih... 😊
  • Kurniawan
    15 Mei, 2019
    Profil: https://www.blogger.com/profile/15569497810744969348
    Mba tolong bikinin tutorial load more atau artikel berikutnya kayak punya mba igniel dong
    • Igniel
      04 Juni, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Infinite scroll cek:
      https://www.igniel.com/2018/11/infinite-scroll-blogger.html