Kali ini saya akan berbagi mengenai cara membuat animasi pada sebuah tombol dengan menggunakan keyframes.  Caranya, ketikkan kode dibawah ini pada halaman CSS agan : @-webkit-keyframes glow { 0% { -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5); border-color: rgba(0,0,255,0....

Tombol Animasi

Kali ini saya akan berbagi mengenai cara membuat animasi pada sebuah tombol dengan menggunakan keyframes

Caranya, ketikkan kode dibawah ini pada halaman CSS agan :

@-webkit-keyframes glow {
  0% {
    -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@-moz-keyframes glow {
  0% {
    -moz-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    -moz-box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@-o-keyframes glow {
  0% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    border-color: rgba(0,0,255,0.5);
  }
  100% {
    box-shadow: 0 0 16px rgba(66, 140, 240, 1.0), 0 0 36px rgba(0, 140, 255, 1.0);
    border-color: rgba(0,0,255,1.0);
  }
}

 

Setelah itu, buat sebuah <div> untuk menampung tombol tersebut dengan nama animationDemo, lalu aturlah tombol agan dengan menambahkan kode berikut ini ke dalam CSS :

#animationDemo {
  width:100px;
  margin:10px auto;
}
#animationDemo button {
    width: 100px;
    height: 35px;
    background: #cde;
    border: 2px solid #ccc;
    border-color: rgba(0,0,255,0.5);
    font-size:18px;
    color: #000;
    text-shadow: rgba(20, 20, 20, 0.5) 1px 1px 5px;
    text-align: center;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
    box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);
  }

 

Langkah selanjutnya tinggal atur apa yang akan terjadi saat mouse di hover. Tambahkan ke dalam CSS agan kode ini :

#animationDemo button:hover, #animationDemo button.hover_effect  {
  background-color:#cce;
  -webkit-animation-name: glow;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;

  -moz-animation-name: glow;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  -moz-animation-timing-function: ease-in-out;

  -o-animation-name: glow;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
  -o-animation-timing-function: ease-in-out;

  animation-name: glow;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

 

Langkah terakhir adalah membuat tombol tersebut di halaman HTML agan. Caranya ketik :

<div id="animationDemo">
  <button class="transition hover">Hover Me</button>
</div>

 

Selesai ! Gampang kan? Jika ada kendala, agan bisa mendownload contoh yang telah saya buat di link yang disediakan.

Nantikan tutorial selanjutnya ya!

 

 

 


About Author

Anthonius


Comment & Discussions

  • Imran Nababan
    Css ini bisa jalan di Internet Explorer Compatible View ga boss?

  • Please LOGIN before if you want to give the comment.