Membuat Tombol Share Sederhana menggunakan CSS dan Font Awesome

Membuat Tombol Share Sederhana menggunakan CSS dan Font Awesome - Tentunya kita sangat senang kalo artikel diwebsite kita banyak dapat share dari pengunjung karena semakin banyak share maka semakin banyak pula kemungkinan artikel kita dikunjungi, untuk itu Juragan pengen berbagi code buat tombol share yang sederhana tapi tetap keca badai :D
Untuk penggunaan icon, Juragan menggunakan Font Awesome, website resminya dimari.

Baca juga : Cara Memasang Font Awesome Di Web

Pertama, tentunya harus membuat koneksi Font Awesome, tulis code ini didalam header webste

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

Dengan begitu, kamu sudah mengkoneksikan Font Awesome secara online.
selanjutnya buat code HTML berikut

<!-- Twitter -->
<a href="http://twitter.com/share?url=URL-ARTIKEL" target="_blank" class="share-btn twitter">
 <i class="fa fa-twitter"></i>
</a>

<!-- Google Plus -->
<a href="https://plus.google.com/share?url=URL-ARTIKEL" target="_blank" class="share-btn google-plus">
 <i class="fa fa-google-plus"></i>
</a>

<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=URL-ARTIKEL" target="_blank" class="share-btn facebook">
 <i class="fa fa-facebook"></i>
</a>

<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?url=URL-ARTIKEL" target="_blank" class="share-btn linkedin">
 <i class="fa fa-linkedin"></i>
</a>

<!-- LinkedIn -->
<a href="http://pinterest.com/pin/create/button/?url=URL-ARTIKEL" target="_blank" class="share-btn pinterest">
 <i class="fa fa-pinterest"></i>
</a>

<!-- Email -->
<a href="mailto:?subject=HMTL%20Share%20Buttons&body=URL-ARTIKEL" target="_blank" class="share-btn email">
 <i class="fa fa-envelope"></i>
</a>

Udah mulai terbentuk kan? hehe, sekarang mulai mempercantik tombol share kamu dengan CSS

.share-btn {
    display: inline-block;
    color: #ffffff;
    border: none;
    padding: 0.5em;
    width: 4em;
    opacity: 0.9;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
    outline: none;
    text-align: center;
}
.share-btn:hover {
    color: #eeeeee;
}
.share-btn:active {
    position: relative;
    top: 2px;
    box-shadow: none;
    color: #e2e2e2;
    outline: none;
}
.share-btn.twitter { background: #55acee; }
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook { background: #3B5998; }
.share-btn.stumbleupon { background: #EB4823; }
.share-btn.reddit { background: #ff5700; }
.share-btn.linkedin { background: #4875B4; }
.share-btn.pinterest { background: #AB0909; }
.share-btn.email { background: #444444; }

Kalo udah jadi begitu jadinya, keren kan, tinggal dikembangin aja biar makin kece :D
see you

NB : text URL-ARTIKEL pada code HTML ganti dengan URL web kalian, misal facebook :

<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://www.juragancoding.com/2015/11/membuat-tombil-share-sederhana.html" target="_blank" class="share-btn facebook">
 <i class="fa fa-facebook"></i>
</a>