Social Buttons using HTML only

How to Social Buttons in HTML only using Twitter Bootstrap 3 and Font Awesome Icons (No Javascript)

by arjunasuresh3

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.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="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
            <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&size=large&hl=en&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
            <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="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&t=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons">
            <i class="fa fa-facebook fa-lg fb"></i>
        </a>
        <a class="btn btn-default btn-lg" target="_blank" title="On Twitter" href="http://twitter.com/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&text=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons">
            <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&url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
            <i class="fa fa-google-plus fa-lg google"></i>
        </a>
        <a...

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://bootstrap-ru.com/cdn/i/surf.png); 
    position: relative;
    left:0px;
    top: -7px;
    float: left;
}

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

.google-plus-one i{
   position: absolute;
   left: -4px;
   bottom: -5px;
}

.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: -3px; }
.btn-lg.google-plus-one span{ font-size: 20px; margin-left: 18px; }
.btn-lg.google-plus-one i{ bottom: -5px; }
.btn-xs.google-plus-one span{ font-size: 12px;}
.btn-xs.google-plus-one i{ bottom: -7px; }