<div class="share">
  <a class="f-book" href="https://facebook.com" target="_blank" data-group="button"><i class="fa fa-facebook fa-lg"></i></a>
  <a class="twitter" href="https://twitter.com" target="_blank" data-group="button"><i class="fa fa-twitter fa-lg"></i></a>
  <a class="google" href="https://google.com/plus" target="_blank" data-group="button"><i class="fa fa-google-plus fa-lg"></i></a>
  <a class="dribbble" href="http://dribbble.com" target="_blank" data-group="button"><i class="fa fa-dribbble fa-lg"></i></a>  
  <a class="pinterest" href="https://pinterest.com" target="_blank" data-group="button"><i class="fa fa-pinterest fa-lg"></i></a>
  <br />
  <div class="persp">
    <a class="f-book2" href="https://facebook.com" target="_blank" data-group="button"><i class="fa fa-facebook fa-lg"></i></a>
    <a class="twitter2" href="https://twitter.com" target="_blank" data-group="button"><i class="fa fa-twitter fa-lg"></i></a>
    <a class="google2" href="https://google.com/plus" target="_blank" data-group="button"><i class="fa fa-google-plus fa-lg"></i></a>
    <a class="dribbble2" href="http://dribbble.com" target="_blank" data-group="button"><i class="fa fa-dribbble fa-lg"></i></a>  
    <a class="pinterest2" href="https://pinterest.com" target="_blank" data-group="button"><i class="fa fa-pinterest fa-lg"></i></a>
  </div>
</div>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

/* 
  facebook: #3b5998;
  twitter: #4099ff; 
  google: #d34836; 
  dribbble: #c73b6f; 
  pinterest: #c92228;
*/

body {
  background: url('https://subtlepatterns.com/patterns/noise_lines.png');  
}

.share {
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 500px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

a[data-group=button] {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  transition: all .6s ease;
  cursor: pointer;
  display: inline-block;
  background: #fff;
}

.f-book {
  border: 1px solid #3b5998;
  color: #3b5998;
}

.f-book:hover {
  box-shadow: 0 50px #3b5998 inset;
  color: #fff;
}

.twitter {
  border: 1px solid #4099ff;
  color: #4099ff;
}

.twitter:hover {
  box-shadow: 0 50px #4099ff inset;
  color: #fff;
}

.google {
  border: 1px solid #d34836;
  color: #d34836;
}

.google:hover {
  box-shadow: 0 50px #d34836 inset;
  color: #fff;
}

.dribbble {
  border: 1px solid #c73b6f;
  color: #c73b6f;
}

.dribbble:hover {
  box-shadow: 0 50px #c73b6f inset;
  color: #fff;
}

.pinterest {
  border: 1px solid #c92228;
  color: #c92228;
}

.pinterest:hover {
  box-shadow: 0 50px #c92228 inset;
  color: #fff;
}

.f-book2 {
  border: 1px solid #3b5998;
  color: #3b5998;
}

.f-book2:hover {
  background: #3b5998;
  color: #fff;
  transform: rotateY(360deg);
}

.twitter2 {
  border: 1px solid #4099ff;
  color: #4099ff;
}

.twitter2:hover {
  background: #4099ff;
  color: #fff;
  transform: rotateY(360deg);
}

.google2 {
  border: 1px solid #d34836;
  color: #d34836;
}

.google2:hover {
  background: #d34836;
  color: #fff;
  transform: rotateY(360deg);
}

.dribbble2 {
  border: 1px solid #c73b6f;
  color: #c73b6f;
}

.dribbble2:hover {
  background: #c73b6f;
  color: #fff;
  transform: rotateY(360deg);
}

.pinterest2 {
  border: 1px solid #c92228;
  color: #c92228;
}

.pinterest2:hover {
  background: #c92228;
  color: #fff;
  transform: rotateY(360deg);
}

.persp {
  perspective: 25em;
}