<!--
Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/
-->
<div class="share">
  <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A//codepen.io/supah/pen/MKNwZV" target="_blank" class="ico fb"><i class="fa fa-facebook"></i></a>
  <a href="https://twitter.com/home?status=Social%20Share%20by%20%40supahfunk%20http%3A//codepen.io/supah/pen/MKNwZV" target="_blank" class="ico tw"><i class="fa fa-twitter"></i></a>
  <a href="https://plus.google.com/share?url=http%3A//codepen.io/supah/pen/MKNwZV" target="_blank" class="ico gp"><i class="fa fa-google-plus"></i></a>
  <span class="text"><em>SHARE</em></span>
  <svg class="ico-share"><use xlink:href="#ico-share"></use></svg>
</div>
<div class="share">
  <a href="https://www.facebook.com/sharer/sharer.php?u=http%3A//codepen.io/supah/pen/MKNwZV" target="_blank" class="ico fb"><i class="fa fa-facebook"></i></a>
  <a href="https://twitter.com/home?status=Social%20Share%20by%20%40supahfunk%20http%3A//codepen.io/supah/pen/MKNwZV" target="_blank" class="ico tw"><i class="fa fa-twitter"></i></a>
  <a href="https://plus.google.com/share?url=http%3A//codepen.io/supah/pen/MKNwZV" target="_blank" class="ico gp"><i class="fa fa-google-plus"></i></a>
  <span class="text"><em>SHARE</em></span>
  <svg class="ico-share"><use xlink:href="#ico-share"></use></svg>
</div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">
<symbol id="ico-share" x="0px" y="0px"
 viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
  <g>
<path fill="#FFFFFF" d="M13.26,10.387c-0.781,0-1.484,0.328-1.982,0.854L5.445,8.385c0.02-0.133,0.034-0.27,0.034-0.41
		c0-0.136-0.013-0.269-0.032-0.399l5.823-2.824c0.5,0.529,1.205,0.861,1.99,0.861c1.514,0,2.74-1.227,2.74-2.74
		s-1.227-2.74-2.74-2.74c-1.513,0-2.739,1.227-2.739,2.74c0,0.136,0.013,0.269,0.032,0.399L4.73,6.097
		c-0.5-0.529-1.205-0.861-1.99-0.861C1.227,5.236,0,6.462,0,7.976c0,1.513,1.227,2.739,2.74,2.739c0.781,0,1.484-0.328,1.983-0.854
		l5.832,2.855c-0.021,0.134-0.035,0.27-0.035,0.41c0,1.514,1.227,2.739,2.74,2.739S16,14.641,16,13.127S14.773,10.387,13.26,10.387z
		"/></g>
  </symbol></svg>

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  background: #fafafa;
  color: #fff;
  font-family: Roboto, sans-serif;

  a {
    color: #fff;
  }

}

.share {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 8px 18px;
  width: 215px;
  height: 60px;
  font-size: 24px;
  letter-spacing: 2px;
  overflow: hidden;
  background: linear-gradient(to bottom, #15aaff, #149fee);
  border-radius: 30px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .1);
  transition: all .2s ease-in-out;
  cursor: default;
  user-select: none;

  .text {
    position: absolute;
    top: 18px;
    left: 42px;
    overflow: hidden;
    width: 90px;
    height: 25px;
    text-align: right;
    z-index: 1;

    em {
      position: absolute;
      right: 0;
      top: 0;
      transition: right .2s ease-in-out .1s;
    }
  }

  .ico-share {
    position: absolute;
    top: 20px;
    right: 43px;
    transition: right .2s ease-in-out;
    width: 20px;
    height: 20px;
  }

  .ico {
    font-size: 24px;
    position: absolute;
    top: 18px;
    left: -35px;
    transition: all .2s ease-in-out;
    display: inline-block;
    z-index: 2;
  }

  &:hover {
    background: linear-gradient(to top, #15aaff, #149fee);
    box-shadow: inset 0 3px 10px rgba(0, 0, 0, .3);

    em {
      right: -300%;
      transition-delay: 0;
    }

    .fb {
      left: 32px;
      transition-delay: 0.3s;
    }

    .tw {
      left: 70px;
      font-size: 25px;
      transition-delay: 0.2s;
    }

    .gp {
      left: 119px;
      transition-delay: 0.1s;
    }

    .ico-share {
      top: 23px;
      right: 30px;
      width: 15px;
      height: 15px;
    }
  }
}

/* Second */
.share:nth-child(2) {
  margin-top: 50px;
  overflow: visible;
  display: none;

  &::before, &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(to bottom, #15aaff, #149fee);
    border-radius: 30px;
    transition: all .2s ease-in-out 0s;
    transition-delay: 0.35s;
  }

  &::before {
    background: linear-gradient(to bottom, #E2E2E2, #F5F5F5);
    box-shadow:  inset 0 0 1px rgba(0, 0, 0, 0.7);
    top: 0;
    width: 78%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: -1;
    transition: top .17s ease-in-out;
    transition-delay: 0.35s;
    border-radius: 0 0 8px 8px;
  }

  .text, 
  .ico-share {
    z-index: 2;
  }

  .ico {
    color: #15a7fa;
    top: 10px;
    text-shadow: none;
    transition: all .17s ease-in-out;
    z-index: 1;
  }

  .fb {
    left: 48px;
    transition-delay: 0.1s;
    color: #43609c;
  }

  .tw {
    left: 87px;
    transition-delay: 0.18s;
    color: #1da1f2;

  }

  .gp {
    left: 135px;
    transition-delay: 0.26s;
    color: #d73d32;    
  }
  
  .ico-share {
    transition: all .17s ease-in-out .1s;
  }

  &:hover {

    &::after {
      box-shadow: 0 1px 4px rgba(0, 0, 0, .5), inset 0 3px 10px rgba(0, 0, 0, .3);
      background: linear-gradient(to top, #15aaff, #149fee);
      transition-delay: 0s;
    }

    &::before {
      top: 90%;
      transition-delay: 0s;
    }

    .text em {
      right: 0;
    }

    .ico-share {
      top: 21px;
      right: 43px;
      width: 16px;
      height: 16px;
      transition-delay: 0s;
    }

    .ico {
      top: 75px;
    }

  }
}