Cara Membuat Animasi Hover Bagus Dengan CSS3

Halo, Jumpa lagi dengan saya 🙂 , seperti biasa nya saya tidak akan bosan-bosan untuk berbagi turorial kepada kalian. Nah, kali ini akan saya bagikan referensi dan tutorial mengenai bagaimana Cara Membuat Animasi Hover Bagus Dengan CSS3, baik langsung saja simak langkah-langkah nya berikut ini.

Pertama kita akan buat struktur HTML seperti berikut.

<div class="button">
  <p class="button-text">Go !</p>
  <div class="button-inner">
    <div class="skew">
      <p class="css-button-inner-text">Go !</p>
    </div>
  </div>
</div>

Nah, setelah struktur HTML dibuat, selanjut nya kita akan desain dengan kode CSS3 berikut ini.

body {
  text-align: center;
  padding-top: 100px;
  background-color: #333;
}

.button {
  border: 1px solid #d5402b;
  height: 50px;
  width: 220px;
  position: relative;
  margin: auto;
  overflow: hidden;
  cursor: pointer;
  color: white;
}

p.button-text {
  width: 100%;
  position: absolute;
}

.button-inner {
  height: 51px;
  width: 265px;
  position: relative;
  left: -4px;
  top: -1px;
  border: 1px solid #d5402b;
  background-color: #d5402b;
  text-align: center;
  -webkit-transform: skew(-42deg) translate(300px,0);
  -moz-transform: skew(-42deg) translate(300px,0);
  -o-transform: skew(-42deg) translate(300px,0);
  transform: skew(-42deg) translate(300px,0);
  -webkit-animation-name: buttonx-out;
  -webkit-animation-duration: .7s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -moz-animation-name: buttonx-out;
  -moz-animation-duration: .7s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-name: buttonx-out;
  animation-duration: .7s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.skew {
  -moz-transform: skew(40deg);
  -o-transform: skew(40deg);
  transform: skew(40deg);
}

.button:hover > .button-inner {
  -webkit-animation-name: buttonx-in;
  -webkit-animation-duration: .6s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -moz-animation-name: buttonx-in;
  -moz-animation-duration: .6s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  animation-name: buttonx-in;
  animation-duration: .6s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transform: skew(-42deg) translate(-20px, -0px);
  -o-transform: skew(-42deg) translate(-20px, -0px);
  transform: skew(-42deg) translate(-20px, -0px);
}

@keyframes buttonx-in {
    from {transform:skew(-42deg) translate(-300px, 0);}
    to {transform:skew(-42deg) translate(-20px, -0px);}    
}

@keyframes buttonx-out {
    from {transform: skew(-42deg) translate(0, 0);}
    to {transform: skew(-42deg) translate(300px, -0px);}
}

@-webkit-keyframes buttonx-in {
    from {transform:skew(-42deg) translate(-300px, 0);}
    to {transform:skew(-42deg) translate(-20px, -0px);}    
}

@-webkit-keyframes buttonx-out {
    from {transform: skew(-42deg) translate(0, 0);}
    to {transform: skew(-42deg) translate(300px, -0px);}
}

Oke, kalau sudah semua, silahkan simpan terlebih dahulu kode diatas, kemudian kalian jalankan dibrowser masing-masing dan lihat hasilnya. Silahkan kalian arahkan kursor ke arah tombol maka akan terjadi animasi hover. Baiklah sampai disini referensi dan tutorial mengenai Cara Membuat Animasi Hover Bagus Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂