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

Langkah pertama masuk ke akun Blogger sobat
Pilih menu Tema, pilih Edit HTML
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'/>

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 https://tutorialbloggerindo1.blogspot.co.id/*/
#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 https://tutorialbloggerindo1.blogspot.co.id/*/
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.

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="https://tutorialbloggerindo1.blogspot.co.id/" target="_blank">Download <i class="fa fa-download fa-lg"></i></a></div>

Pengaturan :

Ganti https://tutorialbloggerindo1.blogspot.co.id/ 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.

Cari Blog Ini