A Pen by Erick.

gzHDs.markdown

gzHDs

A Pen by Erick on CodePen.

License.

index.html

<ul class="spicesocialwidget">
  <li class="facebook">
    <a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook">
      <div class="tooltip"><span>Facebook</span></div>
    </a>
  </li>
  <li class="googleplus">
    <a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus"></a>
  </li>
  <li class="pinterest">
    <a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest"></a>
  </li>
  <li class="twitter">
    <a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter"></a>
  </li>
  <li class="rss">
    <a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss"></a>
  </li>
  <li class="skype">
    <a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype"></a>
  </li>
  <li class="vimeo">
    <a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo"></a>
  </li>
  <li class="dribbble">
    <a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble"></a>
  </li>
  <li class="flickr">
    <a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr"></a>
  </li>
  <li class="linkedin">
    <a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
    </a>
  </li>
  <li class="youtube">
    <a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube"></a>
  </li>
</ul>

style.css

ul.spicesocialwidget {
  /*float:right;*/
  margin: 140px 0;
  padding: 0;
  width: auto;
  height: 32px;
  border: 1px solid rgba(0,0,0,0.1);
  text-align: center;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
ul.spicesocialwidget li {
  /*float:left;*/
  list-style:none outside none;
  border:none;
  display: inline-block;
}
ul.spicesocialwidget li a {
  background-color:transparent;
  background-image:url('http://fc08.deviantart.net/fs71/f/2014/094/5/2/spice_social_gadget_sprite_by_joeart_tn-d7cywb9.png');
  background-repeat:no-repeat;
  background-size:auto 96px;
  border:0 none;
  display:block;
  height:32px;
  /*overflow:hidden;*/
  text-align:left;
  text-decoration:none;
  /*transition:all 0.2s ease 0s;*/
  width:32px;
  position: relative;
  display: flex;
}


.tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -25px;
  left: 50%;
  z-index: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  
}
.tooltip span {
  position: relative;
  left: -50%;
  padding: 6px 8px 5px 8px;
  border-radius: 3px;
  font-size: .7rem;
  z-index: 1;
  line-height: 1;
}
.tooltip span:after {
  position: absolute;
  content: " ";
  width: 0;
  height: 0;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
}
.spicesocialwidget a:hover .tooltip {
  display: block;
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate(0, -10px);
  -moz-transform: translate(0, -10px);
  -ms-transform: translate(0, -10px);
  transform: translate(0, -10px);
}

.ie7 ul.spicesocialwidget li a,
.ie8 ul.spicesocialwidget li a {
  background-image:url('http://fc08.deviantart.net/fs71/f/2014/094/5/2/spice_social_gadget_sprite_by_joeart_tn-d7cywb9.png');
}
ul.spicesocialwidget li.facebook a { background-position:0 0; }
ul.spicesocialwidget li.flickr a { background-position:-32px 0; }
ul.spicesocialwidget li.dribbble a { background-position:-64px 0; }
ul.spicesocialwidget li.googleplus a { background-position:-96px 0; }
ul.spicesocialwidget li.linkedin a { background-position:-128px 0; }
ul.spicesocialwidget li.pinterest a { background-position:-160px 0; }
ul.spicesocialwidget li.rss a { background-position:-192px 0; }
ul.spicesocialwidget li.skype a { background-position:-224px 0; }
ul.spicesocialwidget li.twitter a { background-position:-256px 0; }
ul.spicesocialwidget li.vimeo a { background-position:-288px 0; }
ul.spicesocialwidget li.youtube a { background-position:-320px 0; }

ul.spicesocialwidget li.facebook a:hover { background-position:0 -32px}
ul.spicesocialwidget li.flickr a:hover { background-position:-32px -32px}
ul.spicesocialwidget li.dribbble a:hover { background-position:-64px -32px}
ul.spicesocialwidget li.googleplus a:hover { background-position:-96px -32px}
ul.spicesocialwidget li.linkedin a:hover { background-position:-128px -32px}
ul.spicesocialwidget li.pinterest a:hover { background-position:-160px -32px}
ul.spicesocialwidget li.rss a:hover { background-position:-192px -32px}
ul.spicesocialwidget li.skype a:hover { background-position:-224px -32px}
ul.spicesocialwidget li.twitter a:hover { background-position:-256px -32px}
ul.spicesocialwidget li.vimeo a:hover { background-position:-288px -32px}
ul.spicesocialwidget li.youtube a:hover { background-position:-320px -32px}

.spicesocialwidget .facebook span { background: #3b5a9b; color: #dce5ed; text-shadow: 0px 1px 0px #2f487c; }
.spicesocialwidget .facebook span:after { border-top-color: #3b5a9b; }