Tutorial Button Awesome

Button Awesome

Tutorial Button Awesome...

Selamat pagi semuanya,Di hari sabtu ini saya akan share Tutorial Button Awesome.
Karna disetiap template saya mempunyai button awesome,Saya akan share cara menggunakannya
Oke,Langsung saja kita mulai

1.Button Download:

<div style="text-align: center;">
<a class="button download" href="Link Download Mu">Download</a> 
</div>

Hasilnya akan seperti ini:

Download

2.Button Demo:

<div style="text-align: center;">
<a class="button demo" href="Link Demo Mu">Download</a> 
</div>

Hasilnya akan seperti ini:

Demo

3.Button Info:

<div style="text-align: center;">
<a class="button info" href="Link Info Mu">Download</a> 
</div>

Hasilnya akan seperti ini:

Info

4.Button Website

<div style="text-align: center;">
<a class="button website" href="Link Mu">Download</a> 
</div>

Hasilnya akan seperti ini:

Website

Dan untuk lainnya kalian bisa lihat css dibawah ini

.button.info{background:#34495e}
.button.download{background:#e74c3c}
.button.demo{background:#9b59b6}
.button.website{background:#1abc9c}
.button.screenshot{background:#34495e}
.button.windows{background:#3498db}
.button.android{background:#2ecc71}
.button.apple{background:#95a5a6}
.button.linux{background:#e67e22}
.button.fb{background:#4869b0}
.button.twitter{background:#00bbf5}
.button.googlep{background:#cb3e2e}
.button.subscribe{background:#f1c40f}
.button.info:hover{background:#2c3e50}
.button.download:hover{background:#c0392b}
.button.demo:hover{background:#8e44ad}
.button.website:hover{background:#16a085}
.button.screenshot:hover{background:#2c3e50}
.button.windows:hover{background:#2980b9}
.button.android:hover{background:#27ae60}
.button.apple:hover{background:#7f8c8d}
.button.linux:hover{background:#d35400}
.button.fb:hover{background:#295697}
.button.twitter:hover{background:#00aced}
.button.googlep:hover{background:#bc2e1c}
.button.subscribe:hover{background:#f39c12}
.button.info:before{content:"\f05a"}
.button.download:before{content:"\f0ed"}
.button.demo:before{content:"\f06e"}
.button.website:before{content:"\f0ac"}
.button.screenshot:before{content:"\f03e"}
.button.screenshotm:before{content:"\f10b"}
.button.windows:before{content:"\f17a"}
.button.android:before{content:"\f17b"}
.button.apple:before{content:"\f179"}
.button.linux:before{content:"\f17c"}
.button.fb:before{content:"\f09a"}
.button.twitter:before{content:"\f099"}
.button.googlep:before{content:"\f0d5"}
.button.subscribe:before{content:"\f09e"}
.button.info:before, 
.button.website:before, 
.button.demo:before, 
.button.download:before, 
.button.screenshot:before, 
.button.windows:before, 
.button.android:before, 
.button.apple:before, 
.button.linux:before, 
.button.fb:before, 
.button.twitter:before, 
.button.googlep:before, 
.button.subscribe:before{font-family:"FontAwesome"; font-weight:normal; font-style:normal; vertical-align:middle; margin:0 8px 0 -6px; font-size:15px; color:#fff}

Tinggal kalian sesuaikan dengan kebutuhan kalian,Sekian dari saya Terima kasih

Share Ke :