Membuat Efek Goyang Pada Button Menggunakan CSS

Membuat Efek Goyang Pada Button Menggunakan CSS – Pada tutorial kali ini, kamu akan mempelajari membuat efek goyang pada button menggunakan CSS. Efek ini akan aktif saat cursor berada pada area di atas button dan untuk membuat efek ini kamu perlu memahami penggunaan dari @-webkit-keyframes, hover, dan focus yang ada pada properti CSS. Tampilan button dibuat menggunakan warna font putih dan warna backgroudnya adalah hitam. Perhatikan CSS dan HTML berikut untuk membuat efek goyang pada button menggunakan CSS.

CSS

.vibrate{
  display: inline-block;
  background: #000;
  border: 0;
  padding: 10px 20px;
  font-size: 3rem;
  border-radius: 0.2rem;
  font-weight: 600;
  color: #fff;
}

.vibrate:hover,
.vibrate:focus{
  -webkit-animation-name: vibrate;
  -webkit-animation-duration: 0.8s;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
}

@-webkit-keyframes vibrate {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-1deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}

HTML

<html>
 <head>
 </head>
 <body>
   <button class="vibrate">
   Click Here
   </button>
 </body>
</html>

Hasil dapat dilihat pada jsfiddle berikut.

Avatar
Temukan kode-kode Java, Kotlin, Python dan bahasa pemrograman lainnya hanya di www.inpows.com. Kontak: editor@inpows.com
Back To Top