Cara Membuat Tombol Button Menggunakan Icon Font Awesome

Selamat hari minggu sobat.. Sudah lama tidak posting di blog ini maklum lagi bikin blog baru. Apa kabar sob? Nah pada kesempatan ini saya bagikan tutoria Cara Membuat Tombol Download Menggunakan Icon Font Awesome.

Berikut tutorialnya :

1. Silahkan masuk ke Edit HTML. kemudian paste kode berikut sebelum kode </head>

<link href='path/to/font-awesome/css/font-awesome.min.css' rel='stylesheet'/>







2. Kemudian paste CSS berikut tepat sebelum kode  ]]></b:skin>

.button2{
float:left;
list-style:none;
text-align:center;
width: 100%;
margin:5px 0;
padding:0;
font-size:25px;
clear:both;
}
.button2 ul {
margin:0;padding:0
}
.button2 li{
display:inline;
margin:0;
padding:0
}
.windows {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #22A7F0; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}
.linux {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #F27935; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}
.apple {
border: none;border-radius:2px;
padding: 8px 19px !important; 
background: #F7CA18; 
color: #fff !important;
text-align: center; 
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
transition: background-color .4s ease-out 0s;
}
.windows:hover { 
background: #454242;
text-decoration:none 
}
.linux:hover { 
background: #454242;
text-decoration:none 
}
.apple:hover { 
background: #454242;
text-decoration:none 
}
.linux:before { 
content : "\f17c"; 
font-family : FontAwesome; 
font-weight : normal; 
padding :11px 11px 9px !important; 
background : #E67E22; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 25px; 
}
.windows:before { 
content : "\f17a"; 
font-family : FontAwesome; 
font-weight : normal; 
padding : 11px 11px 9px !important; 
background : #3498DB; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 25px; 
} 
.apple:before { 
content : "\f179"; 
font-family : FontAwesome; 
font-weight : normal; 
padding : 11px 11px 9px !important; 
background : #F9BF3B; 
margin-left : -19px; 
margin-right : 6px; 
border-radius : 3px 0 0 3px; 
font-size : 25px; 
} 










3. Klik Simpan
4. Silahkan posting dan masukan kode berikut :

 <div style="text-align: center;">
<ul class="button2">
<li><a class="windows" href="http://adf.ly/r4G3G" target="_blank">Windows</a></li>
<li><a class="linux" href="http://adf.ly/r4GTV" target="_blank">Linux</a></li>
<li><a class="apple" href="http://adf.ly/r4GTV" target="_blank">Mac</a></li>
</ul>
</div>
<div class="clear">
</div>










Share :

Tweet

✚

Related Post