CSS social media share buttons

social-buttons.html

<style>
.btnz {
    display: block;
    float: left;
    padding: 10px 15px;
    border:none;
    background-color: #ececec;
    text-decoration: none;
    font-size: 18px;
    color: #FFF;
}
 
.btnz:hover {
    color: #efefef;
}
.facebook {
    background-color: #3b5998;
}
 
.gplus {
    background-color: #dd4b39;
}
 
.twitter {
    background-color: #55acee;
}
 
.stumbleupon {
    background-color: #eb4924;
}
 
.pinterest {
    background-color: #cc2127;
}
 
.linkedin {
    background-color: #0077b5;
}
 
.buffer {
    background-color: #323b43;
}

</style>

<!-- Facebook Share Button -->
<a class="btnz share facebook" href="#"><i class="fa fa-facebook"></i> Share</a>
 
<!-- Googple Plus Share Button -->
<a class="btnz share gplus" href="#" onclick="javascript:void(window.open('https://plus.google.com/share?ur\l='+encodeURIComponent(location), 'Share to Google+','width=600,height=460,menubar=no,location=no,status=no'));"><i class="fa fa-google-plus"></i> Share</a>
 
<!-- Twitter Share Button -->
<a class="btnz share twitter" href="#"><i class="fa fa-twitter"></i> Tweet</a>
 
<!-- Stumbleupon Share Button -->
<a class="btnz share stumbleupon" href="#"><i class="fa fa-stumbleupon"></i> Stumble</a>
 
<!-- Pinterest Share Button -->
<a class="btnz share pinterest" href="#"><i class="fa fa-pinterest"></i> Pin it</a>
 
<!-- LinkedIn Share Button -->
<a class="btnz share linkedin" href="#"><i class="fa fa-linkedin"></i> LinkedIn</a>
 
<!-- Buffer Share Button -->
<a class="btnz share buffer" href="#"><i class="fa fa-share-square-o"></i> Buffer</a>