 |
| Cara Membuat Tombol Dengan Efek Animasi Bounce |
Selamat Malam, kali ini saya akan membagikan sebuah Tutorial Blogging, yaitu Cara Membuat Tombol Dengan Efek Animasi Bounce. kalian tahu game bounce pada hp jadul kan? yups seperti itu, yang bisa diartikan bahwa efek ini memberikan efek tombol melambung. sebenarnya banyak sekali yang share tombol-tombol keren yang bisa disematkan diartikel. tapi belum ada satupun yang memberikan tutorial tombol dengan efek.
Nah, pada kesempatan kali ini lah saya bisa berbagi, dan semoga kalian suka dan juga menerapkannya pada blog kalian. tutorial nya mudah kok sob. kalian hanya perlu menambahkan sedikit kode-kode pada template kalian. langsung simak aja ya tutorial nya.
Cara Membuat Tombol Dengan Efek Animasi Bounce
- Silahkan login terlebih dahulu ke Blogger
- Lanjutkan masuk ke Dasboard blog yang akan di eksekusi > Template > Edit HTML
- Cari kode berikut ini ]]></b:skin> atau <style type='text/css'> lalu masukkan kode berikut ini tepat diatas kode tadi.
- Save Template :)
/* CSS Shortcodes BlogDroid9*/
#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:#4f5a60;}
.btn:hover,.btn:active {background:#ff857c;}
.btn.down:hover,.btn.down:active {background:#5c686f;}
a.btn {color:rgba(255,255,255,1);}
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 BlogDroid9*/
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)}}Nah, bagaimana cara menerapkan ke artikel? silahkan sematkan kode dibawah ini pada bagian HTML bukan Compose sob ..
<div id="wrap">
<a class="btn down anima" href="http://www.blogdroid9.net" target="_blank">RESULT <i class="fa fa-paper-plane"></i></a></div>
Keterangan
Silahkan rubah http://www.blogdroid9.net dengan URL yang kalian ingin tujukan pada tombol tersebut.
Done :)
Jika ada yang belum dimengerti, silahkan tanyakan pada kolom komentar dibawah artikel ini. jika saya bisa menjawab, saya akan jawab secepatnya.
Mungkin sekian dulu artikel dari Cara Membuat Tombol Dengan Efek Animasi Bounce, semoga artikel yang saya berikan bisa bermanfaat dan membuat artikel-artikel kalian semakin kece badai :D
Terima Kasih Atas Kunjungannya