Cara Membuat Button Dengan Animasi Bounce Effect

Button atau tombol biasanya di gunakan untuk memberikan perintah bagi pengguna tombol tersebut. Setelah sebelumnya saya memberikan cara membuat tombol demo dan download ringan di blog, dan juga responsive button dengan 13 gaya, kali ini saya memberikan cara membuat button atau tombol dengan animasi bounce effect atau efek memantul-mantul.

Di sini saya hanya menggunakan CSS jadi sobat tidak perlu khawatir tombol ini akan mengurangi kecepatan dari blog sobat. Saya juga menggunakan font awesome untuk menambahkan iconnya, dimana font awesome ini sangat praktis di gunakan apabila sobat ingin mengubah icon dari tombol ini.

(Baca juga : Cara Membuat Tombol Demo dan Download Ringan Responsive di blogger)

Nah, bagi sobat yang ingin memasang tombol ini di blog, silahkan ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Button Dengan Animasi Bounce Effect di Blog

Cara Memasang Plugin Font Awesome

1. Langkah pertama masuk ke akun Blogger sobat
2. Pilih menu Tema, pilih Edit HTML
3. Cari kode </head> masukan kode plugin font awesome di bawah ini, tepat di atasnya

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

(Baca juga : Cara Membuat Button Responsive 13 Gaya dengan CSS)

Cara Memasang Kode CSS Button di Template Blog

• Cari kode ]]></b:skin> atau </style>, kemudian masukan kode CSS di bawah ini, tepat di atasnya

/* CSS Shortcodes http://www.tutorialumum.com/*/
#wrap {margin:20px auto;text-align:center;}
.btn{display:inline-block;position:relative;font-weight:700;background:#ff675c;padding:9px 18px;margin:0 3px;border-radius:3px;opacity:1;border:0;text-transform:uppercase;transition:all .3s ease-out;}
.btn.down {background:#1194f2;} /*ganti #1194f2 dengan warna yang sobat inginkan */
.btn:hover,.btn:active {background:#000000;} /*ganti #000000 dengan warna gulir tombol yang sobat inginkan */
.btn.down:hover,.btn.down:active {background:#5c686f;}
a.btn {color:#ffffff;}
a.btn:hover,a.btn:active,a.btn.down:hover,a.btn.down:active{color:#fff;}
.btn i {margin-left:10px;font-weight:normal;font-family:FontAwesome;}
.btn.down.anima {-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;}

/* Custom Button http://www.tutorialumum.com/*/
a.minan-btn{border:none;cursor:pointer;padding:10px 20px;display:inline-block;margin:15px;text-transform:uppercase;letter-spacing:1px;font-weight:700;outline:0;position:relative;border-radius:3px;transition:all .3s}
a.minan-btn:hover {-webkit-animation: anim 2s ease-in infinite;animation: anim 2s ease-in infinite;}
a.minan-btn:after {content: '';position:absolute;z-index:-1;transition:all .3s;}
a.minan-btn:before{font-family:Fontawesome;font-style:normal;font-weight:400;font-variant:normal}
a.minan-button{background:#4f93c5;color:#fff!important;overflow:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}
a.minan-button:active {background:#4786b5;top:2px;}
a.minan-button span {display:inline-block;width:100%;height:100%;transition:all 0.3s;backface-visibility:hidden;}
a.minan-button:before{position:absolute;height:100%;width:100%;line-height:2.2;font-size:130%;transition:all .3s}
a.minan-button:active:before {color:#fff;}
a.minan-buttona:hover span {-webkit-transform: translateY(300%);-moz-transform: translateY(300%);-ms-transform: translateY(300%);transform: translateY(300%);}
a.minan-buttona:before {left:0;top:-110%;}
a.minan-buttona:hover:before {top:0;}
a.icon-result:before {content: "\f061";}
@-webkit-keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes anim{5%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}10%{-webkit-transform:scale(.9,1.1) translateY(-.5rem);transform:scale(.9,1.1) translateY(-.5rem)}15%{-webkit-transform:scale(1);transform:scale(1)}}

• Pengaturan :
• Silahkan ganti #1194f2 dengan warna tombol yang sobat inginkan
• Silahkan ganti #000000 dengan warna gulir tombol yang sobat inginkan
• Silahkan ganti #ffffff dengan warna teks yang sobat inginkan
• Setelah selesai mengatur, pilih Simpan tema.

(Baca juga : Cara Membuat Share Button Melayang Dengan Sumo Me)

Cara Memasang Tombol di Artikel

• Masuk ke Entri baru, atau masuk ke artikel yang di inginkan

  

  Masuk ke tab HTML

• Pilih tab HTML, kemudian masukan kode di bawah ini

<div id="wrap"><a class="btn down anima" href="http://www.tutorialumum.com/" target="_blank">Download <i class="fa fa-download fa-lg"></i></a></div>

• Pengaturan :
• Ganti http://www.tutorialumum.com/ dengan link yang sobat inginkan
• Ganti teks Download dengan teks yang sobat inginkan
• Ganti fa-download dengan kode font awesome icon yang sobat inginkan di fontawesome.io
• Jika tidak ingin memakai icon, silahkan hapus kode <i class="fa fa-download fa-lg"></i>
• Setelah selesai, pilih Simpan, kemudian pilih Publikasikan
• Jika berhasil maka tombol akan tampil seperti ini.
  

(Baca juga : Cara Membuat Widget Popular Post Dengan Rating Bintang)

Demikian tutorial dari saya mengenai cara membuat button dengan animasi bounce effect. Jika ada pertanyaan mengenai cara memasangnya atau mengenai tombol ini, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya dari saya mengenai tombol ataupun button yang lainnya, silahkan tetap kunjungi blog Tutorial Umum.

Share this