Social buttons are very important for all web pages since they provide ability to share that page with the others in the internet via social media. Sometimes it is needed to put these buttons in various parts of the site such as sidebar, navbar, footer, and etc. For sure it is not possible to put the same buttons everywhere. Therefore, you will need social buttons series with various sizes. Besides, they are many social networks and it is important to have one button for each of the. The following code collects all of these feature in a one single source.

HTML
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<div class="container">
<div class="btn-group">
<button class="btn btn-default btn-lg disabled">Share:</button>
<a class="btn btn-default btn-lg" target="_blank" title="Like On Facebook" href="https://www.facebook.com/plugins/like.php?href=http://www.devanswer.com">
<i class="fa fa-thumbs-o-up fa-lg fb"></i>
</a>
<a class="btn btn-default btn-lg google-plus-one" target="_blank" title="+1 On Google" href="https://apis.google.com/_/+1/fastbutton?usegapi=1&amp;size=large&amp;hl=en&amp;url=http://www.devanswer.com">
<i class="fa fa-google-plus fa-2x google"></i>
<span class="google">1</span>
</a>
<a class="btn btn-default btn-lg" target="_blank" title="On Facebook" href="https://www.facebook.com/sharer.php?u=http://www.devanswer.com">
<i class="fa fa-facebook fa-lg fb"></i>
</a>
<a class="btn btn-default btn-lg" target="_blank" title="On Twitter" href="https://twitter.com/share?url=http://www.devanswer.com">
<i class="fa fa-twitter fa-lg tw"></i>
</a>
<a class="btn btn-default btn-lg" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=http://www.devanswer.com">
<i class="fa fa-google-plus fa-lg google"></i>
</a>
<a class="btn btn-default btn-lg" target="_blank" title="On LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://www.devanswer.com">
<i class="fa fa-linkedin fa-lg linkin"></i>
</a>
<a class="btn btn-default btn-lg" target="_blank" title="On VK.com" href="https://vk.com/share.php?url=http://www.devanswer.com">
<i class="fa fa-vk fa-lg vk"></i>
</a>
<a class="btn btn-default btn-lg" target="_blank" title="Pin It" href="https://www.pinterest.com/pin/create/button/?url=http://www.devanswer.com">
<i class="fa fa-pinterest fa-lg pinterest"></i>
</a>
<a class="btn btn-default btn-lg" target="_blank" title="Surf!" href="http://surfingbird.ru/share?url=http://www.devanswer.com">
<i class="fa surfingbird fa-lg"></i>
</a>
</div>
</div>
<hr>
<div class="container">
<div class="btn-group">
<button class="btn btn-default disabled">Share:</button>
<a class="btn btn-default" target="_blank" title="Like On Facebook" href="https://www.facebook.com/plugins/like.php?href=http://www.devanswer.com">
<i class="fa fa-thumbs-o-up fa-lg fb"></i>
</a>
<a class="btn btn-default google-plus-one" target="_blank" title="+1 On Google" href="https://apis.google.com/_/+1/fastbutton?usegapi=1&amp;size=large&amp;hl=en&amp;url=http://www.devanswer.com">
<i class="fa fa-google-plus fa-2x google"></i>
<span class="google">1</span>
</a>
<a class="btn btn-default" target="_blank" title="On Facebook" href="https://www.facebook.com/sharer.php?u=http://www.devanswer.com">
<i class="fa fa-facebook fa-lg fb"></i>
</a>
<a class="btn btn-default" target="_blank" title="On Twitter" href="https://twitter.com/share?url=http://www.devanswer.com">
<i class="fa fa-twitter fa-lg tw"></i>
</a>
<a class="btn btn-default" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=http://www.devanswer.com">
<i class="fa fa-google-plus fa-lg google"></i>
</a>
<a class="btn btn-default" target="_blank" title="On LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://www.devanswer.com">
<i class="fa fa-linkedin fa-lg linkin"></i>
</a>
<a class="btn btn-default" target="_blank" title="On VK.com" href="https://vk.com/share.php?url=http%3A%2F%2Fostr.io">
<i class="fa fa-vk fa-lg vk"></i>
</a>
<a class="btn btn-default" target="_blank" title="Pin It" href="https://www.pinterest.com/pin/create/button/?url=http://www.devanswer.com">
<i class="fa fa-pinterest fa-lg pinterest"></i>
</a>
<a class="btn btn-default" target="_blank" title="Surf!" href="http://surfingbird.ru/share?url=http://www.devanswer.com">
<i class="fa surfingbird fa-lg"></i>
</a>
</div>
</div>
<hr>
<div class="container">
<div class="btn-group">
<button class="btn btn-default btn-sm disabled">Share:</button>
<a class="btn btn-default btn-sm" target="_blank" title="Like On Facebook" href="https://www.facebook.com/plugins/like.php?href=http://www.devanswer.com">
<i class="fa fa-thumbs-o-up fa-lg fb"></i>
</a>
<a class="btn btn-default btn-sm google-plus-one" target="_blank" title="+1 On Google" href="https://apis.google.com/_/+1/fastbutton?usegapi=1&amp;size=large&amp;hl=en&amp;url=http://www.devanswer.com">
<i class="fa fa-google-plus fa-2x google"></i>
<span class="google">1</span>
</a>
<a class="btn btn-default btn-sm" target="_blank" title="On Facebook" href="https://www.facebook.com/sharer.php?u=http://www.devanswer.com">
<i class="fa fa-facebook fa-lg fb"></i>
</a>
<a class="btn btn-default btn-sm" target="_blank" title="On Twitter" href="https://twitter.com/share?url=http://www.devanswer.com">
<i class="fa fa-twitter fa-lg tw"></i>
</a>
<a class="btn btn-default btn-sm" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=http://www.devanswer.com">
<i class="fa fa-google-plus fa-lg google"></i>
</a>
<a class="btn btn-default btn-sm" target="_blank" title="On LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://www.devanswer.com">
<i class="fa fa-linkedin fa-lg linkin"></i>
</a>
<a class="btn btn-default btn-sm" target="_blank" title="On VK.com" href="https://vk.com/share.php?url=http://www.devanswer.com">
<i class="fa fa-vk fa-lg vk"></i>
</a>
<a class="btn btn-default btn-sm" target="_blank" title="Pin It" href="https://www.pinterest.com/pin/create/button/?url=http://www.devanswer.com">
<i class="fa fa-pinterest fa-lg pinterest"></i>
</a>
<a class="btn btn-default btn-sm" target="_blank" title="Surf!" href="http://surfingbird.ru/share?url=http://www.devanswer.com">
<i class="fa surfingbird fa-lg"></i>
</a>
</div>
</div>
<hr>
<div class="container">
<div class="btn-group">
<button class="btn btn-default btn-xs disabled">Share:</button>
<a class="btn btn-default btn-xs" target="_blank" title="Like On Facebook" href="https://www.facebook.com/plugins/like.php?href=http://www.devanswer.com">
<i class="fa fa-thumbs-o-up fa-lg fb"></i>
</a>
<a class="btn btn-default btn-xs google-plus-one" target="_blank" title="+1 On Google" href="https://apis.google.com/_/+1/fastbutton?usegapi=1&amp;size=large&amp;hl=en&amp;url=http://www.devanswer.com">
<i class="fa fa-google-plus fa-2x google"></i>
<span class="google">1</span>
</a>
<a class="btn btn-default btn-xs" target="_blank" title="On Facebook" href="https://www.facebook.com/sharer.php?u=http://www.devanswer.com">
<i class="fa fa-facebook fa-lg fb"></i>
</a>
<a class="btn btn-default btn-xs" target="_blank" title="On Twitter" href="https://twitter.com/share?url=http://www.devanswer.com">
<i class="fa fa-twitter fa-lg tw"></i>
</a>
<a class="btn btn-default btn-xs" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=http://www.devanswer.com">
<i class="fa fa-google-plus fa-lg google"></i>
</a>
<a class="btn btn-default btn-xs" target="_blank" title="On LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http://www.devanswer.com">
<i class="fa fa-linkedin fa-lg linkin"></i>
</a>
<a class="btn btn-default btn-xs" target="_blank" title="On VK.com" href="https://vk.com/share.php?url=http://www.devanswer.com">
<i class="fa fa-vk fa-lg vk"></i>
</a>
<a class="btn btn-default btn-xs" target="_blank" title="Pin It" href="https://www.pinterest.com/pin/create/button/?url=http://www.devanswer.com">
<i class="fa fa-pinterest fa-lg pinterest"></i>
</a>
<a class="btn btn-default btn-xs" target="_blank" title="Surf!" href="http://surfingbird.ru/share?url=http://www.devanswer.com">
<i class="fa surfingbird fa-lg"></i>
</a>
</div>
</div>
CSS
.container{ text-align: center; }

/* Button styles: */
i.fb,       span.fb{     	color: #3b5998; }
i.tw,       span.tw{     	color: #00aced; }
i.google,   span.google{ 	color: #dd4b39; }
i.linkin,   span.linkin{ 	color: #007bb6; }
i.vk,       span.vk{     	color: #45668e; }
i.pinterest,span.pinterest{ color: #cb2027; }
i.surfingbird{ max-height: 12px; min-width: 25%; }
i.surfingbird::before{ 
    content: url(http://devanswer.com/codes/files/surf.png); 
    position: relative;
    left:0px;
    top: -7px;
    float: left;
}

.google-plus-one{
   overflow: hidden;
   position: relative;
}

.google-plus-one i{
   position: absolute;
   left: -12px;
   bottom: 2px;
}

.google-plus-one span{
   font-size: 16px; 
   font-weight: 900; 
   line-height: 10px;
   margin-left: 15px;
}

.btn-sm.google-plus-one span{ font-size: 14px; }
.btn-sm.google-plus-one i{ bottom: 2px; left: -8px}
.btn-lg.google-plus-one span{ font-size: 20px; margin-left: 18px; }
.btn-lg.google-plus-one i{ bottom: 2px; left: -16px}
.btn-xs.google-plus-one span{ font-size: 12px;}
.btn-xs.google-plus-one i{ bottom: -2px; left: -13px}