<head>
  <title>Social Buttons using HTML only</title>
  <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">
</head>
<body>
  <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%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&amp;size=large&amp;hl=en&amp;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="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;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="https://twitter.com/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;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&amp;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 class="btn btn-default btn-lg" target="_blank" title="On LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
            <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%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;title=Social%20Buttons%20in%20HTML%20only&amp;description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&amp;image=http%3A%2F%2Fostr.io/img/icon_500x500.png">
            <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%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;media=http%3A%2F%2Fostr.io/img/share-bar.png&amp;description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&amp;">
            <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%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&amp;screenshot=http%3A%2F%2Fostr.io/img/share-bar.png&amp;title=Social%20Buttons%20in%20HTML%20only">
            <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%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 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%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" target="_blank" title="On Facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;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" target="_blank" title="On Twitter" href="https://twitter.com/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;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" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&amp;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 class="btn btn-default" target="_blank" title="On LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
            <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&amp;title=Social%20Buttons%20in%20HTML%20only&amp;description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&amp;image=http%3A%2F%2Fostr.io/img/icon_500x500.png">
            <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%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;media=http%3A%2F%2Fostr.io/img/share-bar.png&amp;description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&amp;">
            <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%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&amp;screenshot=http%3A%2F%2Fostr.io/img/share-bar.png&amp;title=Social%20Buttons%20in%20HTML%20only">
            <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%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-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%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-sm" target="_blank" title="On Facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;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-sm" target="_blank" title="On Twitter" href="https://twitter.com/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;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-sm" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&amp;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 class="btn btn-default btn-sm" target="_blank" title="On LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
            <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%3A%2F%2Fostr.io&amp;title=Social%20Buttons%20in%20HTML%20only&amp;description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&amp;image=http%3A%2F%2Fostr.io/img/icon_500x500.png">
            <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%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;media=http%3A%2F%2Fostr.io/img/share-bar.png&amp;description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&amp;">
            <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%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&amp;screenshot=http%3A%2F%2Fostr.io/img/share-bar.png&amp;title=Social%20Buttons%20in%20HTML%20only">
            <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%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-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%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-xs" target="_blank" title="On Facebook" href="https://www.facebook.com/sharer.php?u=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;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-xs" target="_blank" title="On Twitter" href="https://twitter.com/share?url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;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-xs" target="_blank" title="On Google Plus" href="https://plusone.google.com/_/+1/confirm?hl=en&amp;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 class="btn btn-default btn-xs" target="_blank" title="On LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=http%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html">
            <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%3A%2F%2Fostr.io&amp;title=Social%20Buttons%20in%20HTML%20only&amp;description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&amp;image=http%3A%2F%2Fostr.io/img/icon_500x500.png">
            <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%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;media=http%3A%2F%2Fostr.io/img/share-bar.png&amp;description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&amp;">
            <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%3A%2F%2Fostr.io/code/html-social-like-share-buttons-no-javascript.html&amp;description=Social%20Buttons%20in%20HTML%20only%20using%20Twitter%20Bootstrap%203%20and%20Font%20Awesome%20Icons&amp;screenshot=http%3A%2F%2Fostr.io/img/share-bar.png&amp;title=Social%20Buttons%20in%20HTML%20only">
            <i class="fa surfingbird fa-lg"></i>
        </a>
    </div>
</div>
</body>
.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(https://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: -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}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.