Kombinasi CSS Button Flat UI Dengan Font Awesome

Kombinasi CSS Button Flat UI Dengan Font Awesome – tutorial ini sekaligus untuk menjawab salah satu pertanyaan dari brother Tenri Baso yang menanyakan di artikel sebelumnya, karena pada artikel tersebut tidak sesuai tema konten yang dibahas jadi alangkah baiknya jika saya jawab pada artikel ini. Dengan adanya font awesome saya rasa sangat memudahkan untuk keperluan berbagai hal dan tanpa perlu adanya penggunaan gambar sehingga sangat efektif penggunaannya. Beberapa waktu lalu pernah saya bagikan tutorial untuk membuat tombol share dibawah posting blog, apabila ingin menggantinya dengan kombinasi font awesome seperti yang saya gunakan pada blog ini langkah-langkah penerapannya masih sama seperti pada tutorial sebelumnya.

Namun pastikan terlebih dahulu sudah terpasang font awesome didalam template sebelum mengikuti langkah-langkah di bawah. Apabila belum pernah memasang bisa melihat di tutorial sebelumnya tentang cara memasang dan menggunakan font awesome, disitu juga terdapat list icon font awesome yang bisa dijadikan panduan untuk melihat nama icon. Apabila sudah terpasang bisa dilanjutkan dengan tutorial dibawah ini untuk memodifikasi button dengan kombinasi font awesome.

CSS Social Share Button

Button yang pertama adalah untuk widget social share. Karena sudah ada dibawah posting blog ini jadi saya rasa tidak perlu lagi untuk membuat demo, bisa dilihat langsung di akhir artikel. Berikut cara memasang widget social share dengan kombinasi font awesome. Untuk kode CSS seperti biasa, taruh di atas kode ]]></b:skin> atau </style>

#button-share{background:#34495e;color:#fff;line-height:40px;padding-left:60px}
#button-share h4{font-size:18px;line-height:40px;margin:0;text-transform:uppercase;display:inline}
#button-share h4 span{background:#2c3e50}
#button-share a{position:relative;font:normal 16px/20px 'Yanone Kaffeesatz',sans-serif;color:#fff;text-transform:uppercase;padding:7px 10px 7px 50px;box-shadow:1px 1px 1px #222}
#button-share a:hover{background:#222}#button-share a:hover span{color:#222}
#button-share a span{line-height:20px;width:40px;padding:6px 0;top:0}
#button-share a span.fb{background:#2884f6}.fb{background:#1e90ff}
#button-share a span.tw{background:#45B0E3}.tw{background:#00bfff}
#button-share a span.gp{background:#e00}.gp{background:#f83124}
#button-share a span.me{background:#f39c12}.me{background:#f1c40f}

Sedangkan kode HTML bisa taruh di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'> sesuaikan template masing-masing saja, Selanjutnya simpan template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='button-share'>
<h4><span><i class='fa fa-external-link'/></span> Share artikel ke :</h4>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'><span class='fb'><i class='fa fa-facebook'/></span> Facebook</a> 
<a class='tw' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'><span class='tw'><i class='fa fa-twitter'/></span> Twitter</a> 
<a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'><span class='gp'><i class='fa fa-google-plus'/></span> Google+</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a class='me' href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' title='Share ke Lintasme' rel='nofollow'><span class='me'><i class='fa fa-plus'></i></span> Lintasme</a>");
//]]>
</script>
</div>
</b:if>

CSS Like Button Count (Efek Sliding)

Tombol like button biasanya terpasang dibawah post artikel yang digunakan untuk menampilkan banyaknya jumlah pengunjung yang menyukai artikel tersebut baik itu melalui button like Facebook, Google Plus maupun Twitter. Untuk membuat tampilan button like count agar lebih menarik dapat menggunakan CSS untuk mengatur tampilan dari widget ini. Penerapannya sama seperti pada tombol social share di atas.

#button-count{width:100%;overflow:hidden;background:#34495E;margin:10px 0;padding:3px}
#button-count span{float:left;position:relative;font-size:16px;color:#fff;margin:12px 10px 12px 5px}
.button{background:#DCE0E0;position:relative;display:block;float:left;height:40px;overflow:hidden;width:156px;margin:4px}
.ikons{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;text-align:center}
.ikons i{color:#fff;line-height:42px}
.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:118px;margin:0}
.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}
.button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.facebook .fb_iframe_widget{display:block;position:absolute;right:5px;top:0;z-index:1}
.twitter iframe{left:50px;top:10px;z-index:1;display:block;position:absolute}
.google #___plusone_0{width:90px!important;top:10px;right:5px;position:absolute;display:block;z-index:1}
.facebook .ikons,.facebook .slide{background:#305c99}
.twitter .ikons,.twitter .slide{background:#00cdff}
.google .ikons,.google .slide{background:#d24228}
.facebook:hover .slide,.twitter:hover .slide,.google:hover .slide{left:180px}

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='button-count'>
<span>BAGIKAN:</span>
<div class='facebook button'>
<i class='ikons'>
<i class='fa fa-facebook'/>
</i>
<div class='slide'>
<p>
Like
</p>
</div>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>
</div>

<div class='google button'>
<i class='ikons'>
<i class='fa fa-google-plus'/>
</i>
<div class='slide'>
<p>
+1
</p>
</div>
<!-- Place this tag where you want the +1 button to render. -->
<div class='g-plusone' data-size='medium'/>
<!-- Place this tag after the last +1 button tag. -->
<script src='https://apis.google.com/js/platform.js' type='text/javascript'>
{lang: &#39;id&#39;}
</script>
</div>

<div class='twitter button'>
<i class='ikons'>
<i class='fa fa-twitter'/>
</i>
<div class='slide'>
<p>
Tweet
</p>
</div>
<a class='twitter-share-button' data-count='horizontal' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;https://platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</div>
</div>
</b:if>

CSS Post Button

Button yang ini adalah button yang saya gunakan pada area posting, untuk membuat tombol demo, dll. Penerapannya ke dalam blog, taruh kode CSS seperti langkah di atas. Sedangkan untuk HTML, taruh kedalam post area mode HTML.

.bton-grup{width:500px;text-align:center;margin:5px auto}
.bton{display:inline-block;height:50px;line-height:50px;padding-right:20px;padding-left:70px;position:relative;background:#1abc9c;color:#fff;font-size:22px;font-family:'Yanone Kaffeesatz',sans-serif;text-transform:uppercase;letter-spacing:1px;margin:5px;border-radius:1px;text-shadow:0 1px 0 rgba(0,0,0,0.5);box-shadow:0 2px 2px rgba(0,0,0,0.2)}
.bton span{text-align: center;position:absolute;left:0;width:50px;background:rgba(0,0,0,0.5);border-top-left-radius:1px;border-bottom-left-radius:1px;border-right:1px solid rgba(0,0,0,0.15)}
.bton:hover span{background:#222;border-right:1px solid rgba(0,0,0,0.3)}
.bton.orange{background:#FF7F00}
.bton.purple{background:#8e44ad}
.bton.blue{background:#297fb8}
.bton.red{background:#e74c3c}

<div class='bton-grup'>
<a href='http://mas-andes.blogspot.com' class='bton'><span><i class="fa fa-download"></i></span>Example</a>
<a href='http://mas-andes.blogspot.com' class='bton orange'><span><i class="fa fa-file-text"></i></span>Example</a>
<a href='http://mas-andes.blogspot.com' class='bton purple'><span><i class="fa fa-folder-open"></i></span>Example</a>
<a href='http://mas-andes.blogspot.com' class='bton blue'><span><i class="fa fa-paperclip"></i></span>Example</a>
<a href='http://mas-andes.blogspot.com' class='bton red'><span><i class="fa fa-link"></i></span>Example</a>
</div>

Demikianlah cara mengcustom button agar sedikit lebih menarik dan selanjutnya silahkan bisa di kreasikan sendiri di blog masing-masing.