Tombol Animasi

23 views

Kali ini aku akan mengembangkan mengenai cara menciptakan animasi pada sebuah tombol dengan menggunakan keyframes

Caranya, ketikkan instruksi 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 instruksi 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 ketika mouse di hover. Tambahkan ke dalam CSS agan instruksi 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 ialah menciptakan 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 dapat mendownload pola yang telah aku buat di link yang disediakan.

Nantikan tutorial selanjutnya ya!

 

 

 

Author: 
    author
    No related post!