<div class="share-button">
  <div class="lid">Share</div>
  <div class="share-items-wrapper">
      <div class="share-items">
        <a href="#" class="share-item">      
          <span class="fa fa-facebook"></span>      
        </a>
        <a href="#" class="share-item">
          <span class="fa fa-twitter"></span>
        </a>
        <a href="#" class="share-item">
          <span class="fa fa-dribbble"></span>
        </a>
        <a href="#" class="share-item">
          <span class="fa fa-instagram"></span>
        </a>
        <a href="#" class="share-item">
          <span class="fa fa-tumblr"></span>
        </a>
        <a href="#" class="share-item">
          <span class="fa fa-behance"></span>
        </a>
      </div>
    </div>
  <div class="thank-you">
    Thank you
  </div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans);@import 
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}
*,*:before,*:after{
  box-sizing: border-box;
}
body{
  background:#36bfa6;
  text-align:center;
  font-family: 'Open Sans', sans-serif;
}

.share-button{
  position:absolute;
  height:36px;
  top:50%;
  margin-top:-17px;
  width:135px;
  left:50%;
  margin-left:-65px;
  background:#368b8b;
  border-radius:20px;
  overflow:hidden;
  line-height:36px;
  user-select: none;
}
/*----- FIX overflow + transform + border-radius ---*/
.share-button:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
box-shadow: 0 0 0 50px #36bfa6;
box-sizing: content-box;
transform: translate(0,0);
border-radius: 50px;
z-index: 3;
pointer-events: none;
}
.lid{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#fff;
  border-radius:20px;
  color:#aeaeae;
  transition: 300ms ease all;
  transform-origin: 0 0;
  cursor:default;
z-index: 4;
}
.open .lid{
  transform:rotateX(90deg);
}
.thank-you {
  position:absolute;
top: -100px;
left: 0;
width: 100%;
color: #fff;
  transition: 300ms ease all;
}
.thankyou .thank-you{
  position:absolute;
  top:0px;
}
.share-item{
  display:block;
  color:#368b8b;
  background:#fff;
  text-decoration:none;
  height:30px;
  width:30px;
  text-align:center;
  line-height:30px;  
  border-radius:50%;
  float:left;
  margin-left:3px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  transition: 500ms ease all;
}
.share-item:active{
  background:#eb4c89;
  transition: 50ms ease all;
}
.share-item:nth-child(1){
transform: translateX(200px) rotate(180deg);
}
.share-item:nth-child(2){
transform: translateX(400px) rotate(200deg);
}
.share-item:nth-child(3){
transform: translateX(580px) rotate(220deg);
}
.share-item:nth-child(4){
transform: translateX(740px) rotate(240deg);
}
.share-item:nth-child(5){
transform: translateX(880px) rotate(260deg);
}
.share-item:nth-child(6){
transform: translateX(1000px) rotate(280deg);
}
.open .share-item{
transform: translateX(0) rotate(0);  
margin-left:3px;
}
.share-items {
position: absolute;
top: 0;
right: 0;
height: 100%;
padding: 3px 0;
width: 201px;
}
.share-items-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;  
  width : 267px;
  left: 50%;
  margin-left:-133.5px;
}
.shared .share-item{
  transform :translateY(200px);
}
.shared .share-item:nth-child(1){
  transition: 200ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(2){
  transition: 600ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(3){
  transition: 1000ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(4){
  transition: 1400ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(5){
  transition: 1800ms cubic-bezier(.32,-0.22,.9,.93) all;
}
.shared .share-item:nth-child(6){
  transition: 2200ms cubic-bezier(.32,-0.22,.9,.93) all;
}

$('.share-button').on('click',function(){  
  $(this).addClass('open');
})
$( ".share-items" ).draggable({ 
  axis: "x",
  containment : ".share-items-wrapper"
});
$( ".share-item" ).on('click',function(){
   $('.share-button').addClass('shared');
   setTimeout(function(){
    $('.share-button').addClass('thankyou');
  }, 800);
  setTimeout(function(){
    $('.share-button').removeClass('open');
    $('.share-button').removeClass('shared');
    $('.share-button').removeClass('thankyou');
  }, 2500);
});