<div class="button-wrap facebook">
  <div class="button-inner-wrap">
    <i class="icon-facebook inactive"></i>
    <i class="icon-facebook active"></i>
  </div>
</div>

<div class="button-wrap dribbble">
  <div class="button-inner-wrap">
    <i class="icon-dribbble inactive"></i>
    <i class="icon-dribbble active"></i>
  </div>
</div>

<div class="button-wrap twitter">
  <div class="button-inner-wrap">
    <i class="icon-twitter inactive"></i>
    <i class="icon-twitter active"></i>
  </div>
</div>

<div class="button-wrap pinterest">
  <div class="button-inner-wrap">
    <i class="icon-pinterest inactive"></i>
    <i class="icon-pinterest active"></i>
  </div>
</div>

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

.button-wrap {
  width: 150px;
  height: 150px;
  position: relative;
  display: inline-block;
  margin: 25px 50px 0;
  cursor: pointer;
  border-radius: 100%;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3);
  
  &.facebook {
    background-color: #3B5998;
    i.active { color: #3B5998; }
  }
  
  &.twitter {
    background-color: #0AC;
    i.active { color: #0AC; }
  }
  
  &.pinterest {
    background-color: #CD2129;
    i.active { color: #CD2129; }
  }
  
  &.dribbble {
    background-color: #F26798;
    i.active { color: #F26798; }
  }
  
  &:hover {
    .button-inner-wrap {
      width: 115px;
      height: 115px;
      
      i.inactive { transform: translate(100px, -50%); }
      i.active { transform: translate(-50%, -50%); }
    }
  }
}

.button-inner-wrap {
  width: 150px;
  height: 150px;
  border: 1px solid #DDD;
  position: absolute;
  left: 50%;
  top: 50%;
  overflow: hidden;
  background-color: #FFF;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  
  i {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 50px;
    transition: all 0.3s ease;
    
    &.inactive {
      color: #CCC;
      transform: translate(-50%, -50%);
    }
    
    &.active { transform: translate(-150px, -50%); }
  }
}