×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

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.
Buka komentar
Tutup komentar
  1. This comment has been removed by the author.

    ReplyDelete
  2. Bang bikin tutorial animasi selain ruber band bang. Trims.

    ReplyDelete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial