<p class="special-share" id="specialShare">Share your page
  <a href="#" class="first"></a>
  <a href="#" class="second"></a>
  <a href="#" class="third"></a>
</p>
<p class="end">by <a href="https://twitter.com/tjacobdesign">@tjacobdesign</a></p>
@import "compass/css3";

@import url(http://weloveiconfonts.com/api/?family=fontawesome);

* { box-sizing: border-box; }

body {
  text-align: center;
  height: 100%;
}
.special-share {
  position: relative;
  display: inline-block;
  background: #4693D0;
  color: white;
  text-decoration: none;
  padding: 20px 40px;
  margin: 60px auto 20px;
  font-family: sans-serif;
  border-radius: 3px;
  cursor: pointer;
  overflow: hidden;
  &:hover a, &.focus a {
    transition: opacity 250ms linear,
                text-indent 250ms ease-out,
                line-height 250ms ease-out;
    opacity: 1;
    &.first, &.third {
      text-indent: 0;
    }
    &.second {
      line-height: 3;
      padding-top: 0;
    }
  }
  a {
    font-family: 'FontAwesome', sans-serif;
    font-size: 1.3em;
    opacity: 0;
    transition: opacity 250ms linear,
                text-indent 250ms ease-out,
                line-height 250ms ease-out,
                padding-top 250ms ease-out;
    color: white;
    text-decoration: none;
    line-height: 3;
    display: inline-block;
    position: absolute;
    width: 33.33%;
    height: 100%;
    left: 0;
    top: 0;
    background: #4693D0;
    &.first {
      text-indent: -60px;
    }
    &.second {
      line-height: 1;
      background: #0A5693;
      left: 33.33%;
      padding-top: 2em;
    }
    &.third {
      text-indent: 60px;
      background: #69903E;
      left: 66.65%;
    }
  }
}

.end a:link, .end a:visited {
  color: #4693D0;
}
View Compiled
$('#specialShare').on('click touchstart', function() {
  $(this).addClass('focus');
  return false;
})

$('#specialShare').on('mouseleave blur', function() {
  $(this).removeClass('focus');
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js