Skip to content Skip to sidebar Skip to footer

Cara Membuat Tombol Download Keren di Blogger

Cara Membuat Tombol Download Keren di Blogger
Cara Membuat Tombol Download Keren di Blogger


Script Tombol Download Keren

Tutorial kali ini adalah membuat tombol atau button download simpel tapi elegan dan keren, yuk kita lihat scriptnya di bawah ini

Link Bootstrap

Letakan kode di atas kode </head> dibawah <head> atau diatas </body> (jika sudah ada bisa diabaikan)


<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>


Kode CSS

Taruh kode ini diatas kode ]]></b:skin>


/* CSS Simple Button Flat UI */
#wrap {
 margin:20px auto;
 text-align:center;
}
#wrap br {
 display:none;
}
.btn {
 display:inline-block;
 position:relative;
 font-family:'Source Sans Pro', Helvetica, sans-serif;
 background:#3b3f48;
 padding:6px 14px;
 font-size:14px;
 margin:0 3px;
 color:#fff!important;
 border-radius:3px;
 border:none;
 text-transform:uppercase;
 text-decoration:none;
 transition:all 0.3s ease-out;
}
.btn.down {
 background:#3b3f48;
 color:#fff!important;
}
.btn.down:hover,.btn.down:active,.btn:hover,.btn:active {
 background:#fc4f3f;
 color:#fff;
}
a.btn.down:hover,a.btn.down:active,a.btn:hover,a.btn:active {
 color:#fff;
}
.btn i {
 margin-left:10px;
 font-weight:normal;
 font-family:FontAwesome;
}


Kode HTML

Langkah yang terakhir adalah menempel kode HTML berikut pada post HTML


<div id="wrap">
<a class="btn down" href="#" rel="nofollow" target="_blank">Tombol 1<i class="fa fa-paper-plane"></i></a>
<br />
<a class="btn down" href="#" rel="nofollow" target="_blank">Tombol 2<i class="fa fa-download"></i></a>
</div>


Demo Tombol Download Keren

Berikut demo tombol download keren


Untuk mengganti icon silahkan ganti fa-paper-plane dan fa-download Disini

Post a Comment for "Cara Membuat Tombol Download Keren di Blogger"