Membuat Flat Button dengan Font Awesome di Blog

Flat button ini munggunakan FontAwesome. Untuk menggunakan Button ini, kalian harus sudah menginstal font awesome pada blog.

Contoh

• DEMO
• DOWNLOAD

Install font awesome dengan meletakkan kode berikut diatas tag </body>, lewati jika sudah

Font<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />

Jika font sudah dipasang, letakan kode berikut diatas </b:skin>

CSS/* CSS Button */
.button{list-style:none;text-align:center;border:0;margin:10px;padding:2px;font-size:14px;clear:both;text-decoration:none;color:#fff}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:10px 15px!important;color:#fff!important;font-weight:400;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;border-radius:2px;border:1px solid #209bbd;letter-spacing:1px;transition:background-color .2s ease-out}
.demo,.download {background-color:#26a8cc;}
.demo:hover,.download:hover {background-color:#fff;color:#26a8cc!important;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transform:rotate(0deg);transition:rotate .2s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transform:rotate(0deg);transition:rotate .2s ease-out;}
.demo:hover:before,.download:hover:before{transform:rotate(360deg);}

Jika sudah, simpan template dan gunakan kode HTML ini pada post.

HTML<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href="YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>

Tentang Unknown

Saya adalah seorang blogger iseng yang secara iseng membuat blog iseng untuk sekadar iseng isengan.

Share this

Related Posts