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
Post a Comment for "Cara Membuat Tombol Download Keren di Blogger"