Cara Memasang Tombol Button Download/demo di blog

Di kesempatan sebelumnya saya sudah membagikan cara mengamankan account whatsapp, dan pada kesempatan kali ini saya akan membagikan cara memasang atau menggunakan TOMBOL BUTTON DOWNLOAD, dan cara seperti ini sudah banyak yang menggunakannya.

Dan buat yang belum tau cara memakai/memasangnya bisa ikuti langkah-langkah dibawah ini dengan seksama, bagi yang sudah tau silahkan bisa menyimak saja.

Pertama Sobat Copy CSS dibawah ini.

CSS/* CSS Button  */
.button2{float:left;list-style:none;text-align:center;width:95%;margin:10px;padding:2px;font-size:14px;clear:both}
.button2 ul{margin:0;padding:0}
.button2 li{display:inline;margin:5px;padding:0;list-style:none}
.button2 li a.demo,.button2 li a.download{position:relative;padding:14px 48px 14px 16px;background:#5EEE66;display:block;color:#fff!important;font-weight:700;font-size:14px;text-align:left;text-transform:uppercase;letter-spacing:.2px;border-radius:3px;box-shadow:0 1px rgba(0,0,0,0.1);line-height:normal;transition:all .3s;max-width:170px;margin:auto;overflow:hidden}
.button2 li a.download{background:#3498db}
.button2 li a.demo:hover,.button2 li a.download:hover{background:#666}
.button2 li a.demo:active,.button2 li a.download:active{cursor:pointer}
.button2 li a.demo:after,.button2 li a.download:after{content:'\F054';background:rgba(0,0,0,0.1);position:absolute;right:0;top:0;font-weight:normal;display:inline-block;margin:0 0 0 10px;color:#fff;padding:16px 24px;font-family:fontawesome;transition:all .3s}
.button2 li:hover a.demo:after,.button2 li:hover a.download:after{background:transparent;-webkit-animation:bounceright .3s alternate ease infinite;animation:bounceright .3s alternate ease infinite}
@-webkit-keyframes bounceright{from{-webkit-transform:translateX(0)}to{-webkit-transform:translateX(3px)}}
@keyframes bounceright{from{transform:translateX(0)}to{transform:translateX(3px)}}

Jika sudah silahkan sobat simpan atau langsung terapkan css diatas di template blog sobat, sebelum menerapkannya silahkan sobat cari kode css bawaan template sobat, jika sudah ketemu silahkan ganti dengan kode css diatas, save.

Selanjutnya sobat silahkan gunakan kode HTML dibawah ini agar sesuai dengan css diatas.

HTML<div class="container">
<h2>
Tombol Demo dan Download</h2>
<div style="text-align: center;">
<ul class="button2">
<li><a class="demo" href="https://agusgunawanofficial.blogspot.com" target="_blank">Demo Link</a></li>
<li><a class="download" href="https://agusgunawanofficial.blogspot.com" target="_blank">Download Link</a></li>
</ul>
</div>
</div>

Yang Berwarna Merah silahkan sobat ganti dengan link sobat sendiri ya.

Dan untuk demo tampilannya bisa lihat dibawah ini.

Tombol Demo dan Download

• Demo 1
• DEMO 2

Ok sobat semuanya selamat mencoba, dan terima kasih sudah mampir di blog saya. Semoga tutorial diatas bisa bermanfaat.

Share this post