Cara Membuat Efek Animasi Rubber Band Pada Hover

Faronesia.com - Hello sobat blogger, pada kesempatan ini saya akan memberikan trik beserta tutorial yang cocok anda terapkan di blog sobat yaitu membuat efek animasi rubber band pada hover. Pasti diantara para pembaca bertanya - tanya "apa sih rubber band itu?". Mari simak penjelasannya berikut ini.

Rubber Band Animation Effect / Efek Animasi Rubber Band

Adalah sebuah animasi seperti efek karet yang bisa goyang memantul. Disini saya menggunakan atribut animation yang sudah diatur melalui keyframe. Jadi, saya bermaksud memberikan efek goyang memantul pada tombol yang tersorot oleh kursor.

Fungsi Efek Animasi Rubber Band

Mungkin beberapa blogger tidak terlalu membutuhkan animasi ini. Namun, Efek Animasi Rubber Band bisa memperindah penampilan blog sobat namun harus dikombinasikan dengan baik di beberap element.

Cara Membuat Efek Animasi Rubber Band Pada Hover

• Pertama - tama sebagai contoh saya akan menyiapkan sebuah tombol atau button seperti dibawah

BUTTON CSS

.faronesiabtn{
  text-align: center;
}
.farobtn{
  border: none;
  margin: 20px;
  padding: 24px;
  width: 220px;
  font-family: "montserrat",sans-serif;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  color: #fff;
  background-size: 200%;
  transition: 0.6s;
}
.farobtn1{
  background-image: linear-gradient(to left,#FFC312,#EE5A24,#FFC312);
}
.farobtn:hover{
  color:#fff;
}

BUTTON HTML

<div class="faronesiabtn">
<button class="farobtn farobtn1">faronesia</button>
</div>

HASIL EKSEKUSI KODE DIATAS

• Tombol diatas jika diklik maka efek hovernya hanya pergeseran warna saja
• Lalu pada bagian element hover silahkan ganti dengan kode CSS dibawah ini

.farobtn:hover{
    animation: rubberBand 1s;
}
@keyframes rubberBand{
    0%{
        transform: scale3d(1,1,1);
    }
    35%{
        transform: scale3d(1.25,.75,1);
    }
    45%{
        transform: scale3d(.75,1,1);
    }
    60%{
        transform: scale3d(1.2,.8,1);
    }
    75%{
        transform: scale3d(1.05,.95,1);
    }
    100%{
        transform: scale3d(1,1,1);
    }
}

HASIL EKSEKUSI KODE DIATAS

• Selanjutnya, bereksperimenlah sendiri

Mudah sekali bukan? Nah tombol atau button diatas hanya sebagai contoh saja, anda bisa menerapkan di element css hover manapun pada blog sobat.

Request tutorial lain?silahkan masuk ke halaman Tanggapan

Demikianlah mengenai Cara Membuat Efek Animasi Rubber Band Pada Hover semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.