Social Buttons using HTML only

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

by bizamajig

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

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;
}
.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; }