Cara Membuat Efek Ripple/gelombang dengan CSS Pada Button

Hai sobat, kali ini saya akan share bagaimana cara untuk membuat sebuah efek ripple pada sebuah button dengan css dengan mudah. Untuk menggunakan CSS ini sangat mudah tinggal copy paste.

Berikut ini adalah source kode cssnya:

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;
  transform: translate(100px,100px);
}
.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;
}

Silahkan untuk menerapkan di button sobat.

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

Berikut Output dari html dan css di atas:












Semoga bermanfaat.

Sumber : https://codepen.io/finnhvman/pen/jLXKJw?editors=0110

Share :