✔ Cara Menciptakan Tombol Demo Dan Download Dengan Efek Animasi Memantul (Bounce Effect)

Hai Gaes.... kali ini memperlihatkan cara menciptakan Button atau Tombol dengan animasi bounce effect atau pengaruh memantul-mantul.

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

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

Cara Memasang Plugin Font Awesome

Langkah pertama masuk ke akun Blogger sobat
Pilih sajian Tema, pilih Edit HTML
Cari isyarat &lthead&gt masukan isyarat plugin font awesome di bawah ini, sempurna 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 isyarat ]]&gt&lt/b:skin&gt atau , lalu masukan isyarat CSS di bawah ini, sempurna di atasnya

 /* CSS Shortcodes aciknadzirah.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 teman inginkan */ .btn:hover,.btn:active {background:#000000;} /*ganti #000000 dengan warna gulir tombol yang teman 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 aciknadzirah.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 teman inginkan

Silahkan ganti #000000 dengan warna gulir tombol yang teman inginkan

Silahkan ganti #ffffff dengan warna teks yang teman inginkan

Setelah akibat mengatur, pilih Simpan tema.

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

Masuk ke tab HTML
Pilih tab HTML lalu masukan isyarat di bawah ini

<div id="wrap">
<a class="btn down anima" href="aciknadzirah.blogspot.com/" target="_blank">Download <i class="fa fa-d0wnl0ad fa-lg"></i></a></div>

PENGATURAN

Ganti aciknadzirah.blogspot.com/ dengan link yang teman inginkan

Ganti teks Download dengan teks yang teman inginkan

Ganti fa-d0wnl0ad dengan isyarat font awesome icon yang teman inginkan di fontawesome.io

Jika tidak ingin menggunakan icon, silahkan hapus isyarat <i class="fa fa-d0wnl0ad fa-lg"></i>

Setelah selesai, pilih Simpan, lalu pilih Publikasikan.

Jika berhasil maka tombol akan tampil ibarat ini.

Demo

Download

Sekian tutorial dari 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.

Sumber http://omipoel.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: