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, kali ini saya memberikan tutorial cara membuat button atau tombol dengan animasi bounce effect atau efek memantul-mantul.
Nah, bagi sobat yang ingin memasang tombol ini di blog, silahkan ikuti langkah-langkah dari saya berikut ini.
Baca juga: Cara Membuat Tombol Demo dan Download Ringan Di blog
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.
Nah, bagi sobat yang ingin memasang tombol ini di blog, silahkan ikuti langkah-langkah dari saya berikut ini.
Baca juga: Cara Membuat Tombol Demo dan Download Ringan Di blog
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 http://www.confignet.ga/*/
#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.confignet.ga/*/
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
<div id="wrap"><a class="btn down anima" href="http://www.confignet.ga/" target="_blank">Download <i class="fa fa-download fa-lg"></i></a></div>
- Pengaturan :
- Ganti http://www.configet.ga/ dengan link yang sobat inginkan
- Ganti teks Download dengan teks yang sobat inginkan misalnya Demo
- 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
Demikianlah 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 Confignet. Untuk tutorial yang lainnya dari saya mengenai tombol ataupun button yang lainnya, silahkan tetap kunjungi blog Confignet.
Tag: Button Download Button Demo
Demikianlah 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 Confignet. Untuk tutorial yang lainnya dari saya mengenai tombol ataupun button yang lainnya, silahkan tetap kunjungi blog Confignet.
Tag: Button Download Button Demo
إرسال تعليق