JSFiddle - React, Tailwind, and code Playground

by AndyE

HTML

<div id="share-widget" class="" ondragstart="return false">
  <a id="share-button-tweet" href="#" class="share-button share-tweet"><span>Tweet</span></a>
  <a id="share-button-fblike" href="#" class="share-button share-fblike"><span>Like</span></a>
  <a id="share-button-plusone" href="#" class="share-button share-plusone"><span>1</span></a>
  <a id="share-button-linkedin" href="#" class="share-button share-linkedin"><span>Share</span></a>
</div>

CSS

#share-widget {
    position:relative;
    top: 55px;
}

.share-button {
    cursor: pointer;
    position: relative;
    display: inline-block;
    width: 54px;
    height: 20px;
    overflow: hidden;
    margin: 0 5px;
    background-image: url('http://s358447095.onlinehome.info/share.png');
    text-decoration:none;
    outline: none;
}
.share-button span {
    font-family: Arial, sans-serif;
    cursor: inherit;
    position: absolute;
    width: 38px;
    right: 1px;
    top: 3px;
    color: inherit;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
}
.share-tweet span { font-size: 10px; top: 4px; }
.share-plusone span { font-size: 12px; right: 20px; font-style: italic; }
.share-linkedin span { font-size: 10px; top: 4px; width:34px;}

.share-tweet            { background-position: 0px 0px; color: #276e8d!important; }
.share-tweet:hover, .share-tweet:focus { background-position: -54px 0px; color: #2299cc!important; }
.share-tweet:active         { background-position: -108px 0px; color: #6ea1ba!important; }
.share-fblike            { background-position: 0px -20px; color: white!important; }
.share-fblike:hover,.share-fblike:focus { background-position: -54px -20px; }
.share-fblike:active     { background-position: -108px -20px; }
.share-plusone            { background-position: 0px -40px; color: #166aee!important; }
.share-plusone:hover,.share-plusone:focus { background-position: -54px -40px; }
.share-plusone:active     { background-position: -108px -40px; }
.share-linkedin            { background-position: 0px -60px; color: #666!important; }
.share-linkedin:hover,.share-linkedin:focus { background-position: -54px -60px; }
.share-linkedin:active     { background-position: -108px -60px; }