<div id="wrapper">
  <div id="share"><span>Share : </span>
    <a href="#" class="container twitter">
      <svg  preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">  
         <circle cx="100" cy="100" r="50"/>
      </svg>
      <div class="social">
        <i class="fa fa-twitter"></i>
      </div>
    </a>
    <a href="#" class="container facebook">
      <svg  preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">  
         <circle cx="100" cy="100" r="50"/>
      </svg>
      <div class="social">
        <i class="fa fa-facebook"></i>
      </div>
    </a>
    <a href="#" class="container google">
      <svg  preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">  
         <circle cx="100" cy="100" r="50"/>
      </svg>
      <div class="social">
        <i class="fa fa-google-plus"></i>
      </div>
    </a>
    <a href="#" class="container pinterest">
      <svg  preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">  
         <circle cx="100" cy="100" r="50"/>
      </svg>
      <div class="social">
        <i class="fa fa-pinterest"></i>
      </div>
    </a>
    <a href="#" class="container linkedin">
      <svg  preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="circle">  
         <circle cx="100" cy="100" r="50"/>
      </svg>
      <div class="social">
        <i class="fa fa-linkedin"></i>
      </div>
    </a>
  </div>
</div>

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css);

html, body{
  height: 100%;
  position: relative;
  width: 100%;
}
body {
  background: radial-gradient(ellipse at top, yellowgreen  0%, darken(yellowgreen, 20%) 100%);
  background-repeat: no-repeat;
}

#wrapper {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  height: 100px;
  #share {
    background: rgba(0,0,0,0.5);
    position: relative;
    margin:0 auto;
    width: 620px;
    span {
      width: 100px;
      height: 100px;
      float: left;
      line-height:100px;
      text-align: center;
      color:white;
    }
  }
}
.container {
  position: relative;
  display:inline-block;
  width: 100px;
  height: 100px;
  line-height:100px;
  text-align:center;
  margin:0 auto;  
  
  .circle {
    fill: none;
    stroke: #ffffff;
    stroke-width:5px;
    stroke-dasharray: 40; 
    transition: all .2s ease-in-out;
    animation: outWaveOut 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards;
  }
  .social {
    color:white;
    font-size:1.8em;    
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;    
    transition: all .5s ease-in-out;
  }
    
  &:hover {
    cursor:pointer;   
  }
}

.twitter:hover {
  .circle {
    fill:#ffffff;
    fill-opacity : 1;      
    animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorTwitter 1s linear forwards;
  }
  .social {color:#3aaae1;}
}
.facebook:hover {
  .circle {
      fill:#ffffff;
  fill-opacity :1;      
  animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorFacebook 1s linear forwards;
  }
  .social {color:#3b5998;}
}
.google:hover {
  .circle {
      fill:#ffffff;
  fill-opacity : 1;      
  animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorGoogle 1s linear forwards;
  }
  .social {color:#dd4b39;}
}
.pinterest:hover {
  .circle {
      fill:#ffffff;
  fill-opacity : 1;      
  animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorPinterest 1s linear forwards;
  }
  .social {color:#cb2027;}
}
.linkedin:hover {
  .circle {
      fill:#ffffff;
  fill-opacity : 1;      
  animation: outWaveIn 1s cubic-bezier(0.42, 0.0, 0.58, 1.0) forwards, colorLinkedin 1s linear forwards;
  }
  .social {color:#007bb6;}
}

@keyframes colorTwitter {
  from {stroke: #ffffff;}
  to {stroke:#3aaae1;}
}
@keyframes colorFacebook {
  from {stroke: #ffffff;}
  to {stroke:#3b5998;}
}
@keyframes colorGoogle {
  from {stroke: #ffffff;}
  to {stroke:#dd4b39;}
}
@keyframes colorPinterest {
  from {stroke: #ffffff;}
  to {stroke:#cb2027;}
}
@keyframes colorLinkedin {
  from {stroke: #ffffff;}
  to {stroke:#007bb6;}
}

@keyframes outWaveIn {
  to {
    stroke-width:10px;
    stroke-dasharray: 400;    
  }
}
@keyframes outWaveOut {
  from {
    stroke-width:10px;
    stroke-dasharray: 400;
  }
  to {
    stroke: #ffffff;
    stroke-width:5px;
    stroke-dasharray: 40; 
  }
}