Cara Membuat Tombol Button Efek Jiggle Dengan CSS

Cara Membuat Tombol Button Efek Jiggle Dengan CSS

Membuat Tombol Button Efek keyframes jiggle With Css

Bagi kalian yang ingin membuat tombol button result seperti mas tamvan atau seperti pada blog arlina, maka kalian berada di blog yg tepat dengan tutorial membuat button efek css keyframes jiggle. 

Button Jiggle ini tidak perlu menggunakan plugin jquery yang pastinya aman untuk di pakai diblog soalnya tampilannya yang bagus dan tanpa membuat berat loading halaman blog. 

Untuk tampilan result dari efek button animation keyframes jiggle ini coba perhatikan button dibawah ini.

Click Me !

Jangan lupa mampir ke post lainnya ya.

Tutorial Blogger Lainnya :

• Membuat Sidebar Navigation Responsive Di Blog

• 2 Aplikasi Terbaik Untuk Membuat Screenshot Format Gif

• Membuat Sidebar Accordion With Jquery di Blog

Nah itu tampilan dari efek css keyframes jiggle hasil modif dari css buatan arlina.
Untuk cara pemasangan Button Jiggle ini sangat mudah, silahkan ikuti langkah demi langkahnya.

Cara Membuat Tombol Button Efek Jiggle Dengan CSS

• Login ke Blogger.com

• Masuk ke Tab Template-> Klik Edit HTML, Cari Code ]]></b:skin> atau </style> 

• Lalu masukan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style> 

.ms-tamvan-square {
 width: 200px; height: 80px;
 overflow: hidden;
 position: relative;
 cursor: pointer;
 margin: 15px;
 border-radius: 6px;
 float: left;
  box-shadow: 0 0 10px;
}
.anim {
  animation: jiggle 1s ease-in infinite;
}
@keyframes jiggle {
  48%, 62% {
    transform: scale(1.0, 1.0)
  }
  50% {
    transform: scale(1.1, 0.9)
  }
  56% {
    transform: scale(0.9, 1.1) translate(0, -5px)
  }
  59% {
    transform: scale(1.0, 1.0) translate(0, -3px)
  }
}
.ms-tamvan-circle {
 width: 80px; height: 80px;
 overflow: hidden;
 position: relative;
 cursor: pointer;
 margin: 15px;
 border-radius: 100%;
 float: left;
}
.ms-tamvan {
 background: #1d1d1d;
 font-family: 'Orbitron', sans-serif;
 font-size: 1.2em;
 text-align: center;
 color: #fff; 
 position: absolute;
 top: 3px;
 left: 3px;
}
.ms-tamvan-square .ms-tamvan {
 width: 194px;
 line-height: 74px;
 border-radius: 5px;
}
.ms-tamvan-circle .ms-tamvan {
 width: 74px; height: 74px;
 border-radius: 100%;
}

/*=================*/
/*====GRADIENT====*/
.gradient, .gradient:after {
 display: block;
 content: "";
 width: 400px; height: 80px;
 background: #bd328f;
 background: -moz-linear-gradient(-45deg,  #bd328f 0%, #bd328f 18%, #2976ab 42%, #292f75 62%, #bd328f 82%, #bd328f 100%);
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#bd328f), color-stop(18%,#bd328f), color-stop(42%,#2976ab), color-stop(62%,#292f75), color-stop(82%,#bd328f), color-stop(100%,#bd328f));
 background: -webkit-linear-gradient(-45deg,  #bd328f 0%,#bd328f 18%,#2976ab 42%,#292f75 62%,#bd328f 82%,#bd328f 100%);
 background: -o-linear-gradient(-45deg,  #bd328f 0%,#bd328f 18%,#2976ab 42%,#292f75 62%,#bd328f 82%,#bd328f 100%);
 background: -ms-linear-gradient(-45deg,  #bd328f 0%,#bd328f 18%,#2976ab 42%,#292f75 62%,#bd328f 82%,#bd328f 100%);
 background: linear-gradient(135deg,  #bd328f 0%,#bd328f 18%,#2976ab 42%,#292f75 62%,#bd328f 82%,#bd328f 100%);
}

.gradient {
 animation: 8s anim linear infinite;
}

.gradient:after {
 transform: translateX(400px);
}

@keyframes anim{
 0% {transform: translateX(0px) ;}
 100% {transform: translateX(-400px) ;}
}

• Kalau sudah dipasang, tinggal save template.

Nah Untuk pemasangan CSSnya Sudah selesai, Nah sekarang tinggal bagaimana menampilkan tombol Button Jiggle ini ke dalam postingan blog??

Caranya sangat mudah, Silahkan lanjutkan membaca post ini.

Cara memasukan Script ke postingan blog

• Kalian masuk ke postingan yang ingin dipasang button Jiggle.

• Lalu masuk ke tab HTML dalam postingan blog, Lihat gambar.

• Setelah Masuk ke tab HTML dalam postingan blog, kalian masukan HTML pemanggil button jiggle ini kedalamnya.

<div class="ms-tamvan-square anim">
  <div class="gradient"></div>
  <div class="ms-tamvan"><a href="http://www.mastamvan.blogspot.com">Click Me !</a></div>
</div></div>

• Nah kalau sudah memasang HTMLnya, silahkan masuk lagi ke tab Compose untuk melanjutkan mengetik postnya.

Silahkan ganti link http://www.mastamvan.blogspot.com dengan link yang mau kalian tuju setelah button animation jiggle ini di klik.

Cukup sekian artikel dari mas tamvan tentang Cara Membuat Tombol Button Efek Jiggle Dengan CSS seperti pada blog arlina ini semoga bermanfat.

Apabila ada yang mau ditanyakan, silahkan bertanya dikolom komentar request tutorial juga boleh tapi jangan yang susah-susah :3 soalnya saya masih newbie :v
Ok. Salam Tamvan :)