×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

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.

Posting Komentar

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

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

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

Tutup