Button Awesome
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:
2.Button Demo:
<div style="text-align: center;">
<a class="button demo" href="Link Demo Mu">Download</a>
</div>Hasilnya akan seperti ini:
3.Button Info:
<div style="text-align: center;">
<a class="button info" href="Link Info Mu">Download</a>
</div>Hasilnya akan seperti ini:
4.Button Website
<div style="text-align: center;">
<a class="button website" href="Link Mu">Download</a>
</div>Hasilnya akan seperti ini:
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
2 comments
Keren gan tombol button nya :D
Iya,ini hanya repost bagi kalian yang memakai template saya :)