<ul class="share-links">
  <li class="facebook"><a href="#"><span class="fontawesome-facebook"></span></a></li>
  <li class="twitter"><a href="#"><span class="fontawesome-twitter"></span></a></li>
  <li class="googleplus"><a href="#"><span class="fontawesome-google-plus"></span></a></li>
</ul>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
body {
  font-size: 26px;
  background: url('http://one-div.com/codepen/menu/bg.jpg')no-repeat;
  background-size: cover;
}

a {
  text-decoration: none;
}

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

.share-links {
  transform-style: preserve-3d;
  width: 3em;
  height: 3em;
  line-height: 3em;
  text-align: center;
  position: absolute;
  left: 50%;
  margin-left: -1.5em;
  top: 50%;
  margin-top: -1.5em;
  transform: rotateX(-35deg);
}

.share-links:after {
  content: "\f045";
  color: #B8AA8F;
  font-family: 'FontAwesome', sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 9999;
  transform: translate3d(0, -30px, 50px);
  margin-left: -0.4em;
  font-size: 1.5em;
  transition: 200ms ease all;
}

.share-links:hover:after {
  opacity: 0;
  transform: translate3d(0, -100%, 50px);
}

.share-links > li {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.share-links > li a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 1;
  color: white;
  background: white;
  transition: 500ms ease all;
}

.share-links > li a span {
  color: currentColor;
  transition: 500ms ease all;
}

.share-links:hover > li a span {
  color: #fff;
}

.share-links > li a:before,
.share-links > li a:after {
  transition: 500ms ease all;
  background: currentColor;
}

.share-links > li a:before {
  height: 0;
  width: 100%;
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
}

.share-links > li a:after {
  width: 0;
  height: 100%;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.1);
}

.share-links:hover > li a:before {
  height: 100%;
}

.share-links:hover > li a:after {
  width: 100%;
}

.share-links > li.facebook {
  top: 0;
  right: 50%;
  transform: rotateY(45deg);
  transform-origin: 100% 0;
}

.share-links:hover > li.facebook a,
.share-links:hover > li.facebook a:before,
.share-links:hover > li.facebook a:after {
  background-color: rgb(59, 89, 152);
  color: rgb(59, 89, 152);
}

.share-links:hover > li.facebook a:hover,
.share-links:hover > li.facebook a:hover:before,
.share-links:hover > li.facebook a:hover:after {
  background-color: rgb(71, 104, 173);
  color: rgb(71, 104, 173);
}

.share-links > li.twitter {
  top: 0;
  left: 50%;
  transform: rotateY(-45deg);
  transform-origin: 0 0;
}

.share-links:hover > li.twitter a,
.share-links:hover > li.twitter a:before,
.share-links:hover > li.twitter a:after {
  background-color: rgb(85, 172, 238);
  color: rgb(85, 172, 238);
}

.share-links:hover > li.twitter a:hover,
.share-links:hover > li.twitter a:hover:before,
.share-links:hover > li.twitter a:hover:after {
  background-color: rgb(98, 187, 255);
  color: rgb(98, 187, 255);
}

.share-links > li.googleplus {
  top: 100%;
  right: 50%;
  transform: rotateY(45deg) rotateX(90deg);
  transform-origin: 100% 0%;
}

.share-links:hover > li.googleplus a,
.share-links:hover > li.googleplus a:before,
.share-links:hover > li.googleplus a:after {
  background-color: rgb(211, 72, 54);
  color: rgb(211, 72, 54);
}

.share-links:hover > li.googleplus a:hover,
.share-links:hover > li.googleplus a:hover:before,
.share-links:hover > li.googleplus a:hover:after {
  background-color: rgb(239, 87, 68);
  color: rgb(239, 87, 68);
}

.share-links > li.googleplus a:after {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  transform: rotateY(-90deg);
  transform-origin: 100% 0;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.1);
}

.share-links > li.googleplus a:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  transform: rotateX(-90deg);
  transform-origin: 0% 0;
  box-shadow: none
}

.share-links:hover > li.googleplus a {
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
}

.share-links > li.facebook a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateX(-90deg);
  transform-origin: 0 0;
}

.share-links > li.facebook a:after {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  transform: rotateY(-90deg);
  transform-origin: 100% 0;
}

.share-links > li.twitter a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotateX(-90deg);
  transform-origin: 0 0;
}

.share-links > li.twitter a:after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  transform: rotateY(90deg);
  transform-origin: 0% 0;
  box-shadow: none;
}

.share-links:hover > li.twitter a {
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.1);
}
/* Optimized for Google Chrome */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.