Cara Membuat Tombol Demo dan Download Dengan Efek Animasi Memantul (Bounce Effect)

Menarik Lainnya

Hai Gaes.... kali ini Om Ipoel memberikan cara membuat Button atau Tombol dengan animasi bounce effect atau efek memantul-mantul.

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

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

Cara Memasang Plugin Font Awesome

Langkah pertama masuk ke akun Blogger sobat
Pilih menu Tema, pilih Edit HTML
Cari kode &lthead&gt 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 ]]&gt&lt/b:skin&gt atau , kemudian masukan kode CSS di bawah ini, tepat di atasnya

/* CSS Shortcodes http://omipoel.blogspot.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://omipoel.blogspot.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.

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

PENGATURAN

Ganti http://omipoel.blogspot.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.

Demo

Download

Sekian tutorial dari Om Ipoel mengenai Cara Membuat Tombol Demo dan Download Dengan Efek Animasi Memantul (Bounce Effect).

Jika ada pertanyaan mengenai cara memasangnya atau mengenai tombol ini, silahkan masukan ke dalam kolom komentar.