Membuat Tombol Demo & Download

Membuat Tombol Demo & Download

Banyak kita menjumpai website atau blog download yang memiliki atau mempunyai tampilan Tombol Download yang menarik. Nah, kali ini saya akan mencoba memberikan tutorial cara membuat tombol download pada blog. Jika biasanya link download suatu website atau blog hanya sebatas tulisan saja, maka dengan memodifikasi sedikit CSS pada HTML template blog, kita bisa menjadikan Link Download kelihatan menarik.

Tombol Download ini saya dapatkan dari blognya Arlina Design. Berikut contoh Tombol Download dan cara memasang nya pada postingan Blog kita.

Cara Membuat Tombol Demo Gradient Color di Blogger :

1. Buka blogger kemudian pilh tema kemudian pilih edit HTML
2. Salin CSS dibawah di edit html kalian.

.buttonDown{list-style:none;text-align:center;border:0;margin:10px 0;clear:both;text-decoration:none}
.buttonDown ul{margin:0;padding:0}
.buttonDown li{display:inline;margin:0 3px;padding:0;list-style:none}
.buttonDown li a.demo,.buttonDown li a.download,.btn,#wrap .ensikologyBtn{display:block;position:relative;vertical-align:top;height:52px;line-height:52px;padding:0 30px;font-size:16px;color:#fff;text-align:center;text-decoration:none;border-radius:3px;cursor:pointer;margin:auto;}
@keyframes ensikologyGC{
    0%{
        background-position:0 50%
    }
    50%{
        background-position:100% 50%
    }
    100%{
        background-position:0 50%
    }
}
.buttonDown li a.demo{background:linear-gradient(-45deg,#3aa4f3,#3aa4f3,#f28d47,#f28d47);background-size:400% 400%;animation:ensikologyGC 15s ease infinite}
.buttonDown li a.download{background:linear-gradient(-45deg,#f28d47,#f28d47,#3aa4f3,#3aa4f3);margin:20px auto 0 auto;background-size:400% 400%;animation:ensikologyGC 15s ease infinite}
.buttonDown li a.demo:hover,.buttonDown li a.download:hover,.btn:hover,.btn:active,.btn.down:hover,.btn.down:active,#wrap .ensikologyBtn:hover,#wrap .ensikologyBtn:active{box-shadow:0 4px 5px rgba(0,0,0,0.06),0 1px 1px rgba(0,0,0,0.09)}.post-body .buttonDown li,.post-body ul.buttonDown{margin:auto}

3. Silahkan simpan dan masukan pada postingan untuk mode HTML masukan dibawah ini.

<div style="text-align: center;">
<ul class="buttonDown">
<li><a class="demo" href="#" rel="nofollow noopener" target="_blank">DEMO</a></li>
<li><a class="download" href="#" rel="nofollow noopener" target="_blank">RESULTS</a></li>
</ul>
</div>
<div class="clear">
</div>

Demo Gradient

• DEMO
• DOWNLOAD

Jika anda menggunakan template ini/ atau viomagz, anda juga bisa membuat seperti dibawah ini.

<a class="buttonDownload" href="/" rel="nofollow" target="_blank">Download</a>

Demo Viomagz

Download

Tombol ini dibuat dengan menggunakan CSS, jadi untuk kreasi lain silakan untuk mengeditnya sesuai keinginan dan kebutuhan.

blogger