JSFiddle - React, Tailwind, and code Playground

Roll Over Social Buttons

by Jennifer Perrin

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-soundcloud"></a>
<a href="#" class="fa fa-pinterest"></a>

CSS

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.fa {
  height: 2em;
  font-size: 3em;
  overflow: hidden;
  margin: 0.5em;
  position: relative;
  text-decoration: none;
  width: 2em;
  -webkit-backface-visibility: hidden;
}
.fa:before, .fa:after {
  left: 0;
  position: absolute;
  text-align: center;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  top: 50%;
  width: 100%;
}
.fa:before {
  color: white;
  -webkit-transform: translate3D(0, -50%, 0);
  -ms-transform: translate3D(0, -50%, 0);
  transform: translate3D(0, -50%, 0);
  z-index: 2;
}
.fa:after {
  padding-bottom: 25%;
  padding-top: 300%;
  top: 0;
}
.fa:hover:after {
  -webkit-transform: translate3D(0, -73%, 0);
  -ms-transform: translate3D(0, -73%, 0);
  transform: translate3D(0, -73%, 0);
}
.fa:hover:before {
  -webkit-transform: translate3D(0, -250%, 0);
  -ms-transform: translate3D(0, -250%, 0);
  transform: translate3D(0, -250%, 0);
}

.fa-twitter:after {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #00acee), color-stop(75%, #ffffff));
  background-image: -webkit-linear-gradient(#00acee 25%, #ffffff 75%);
  background-image: linear-gradient(#00acee 25%, #ffffff 75%);
  content: "\f099";
  color: #00acee;
}

.fa-facebook:after {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #3b5998), color-stop(75%, #ffffff));
  background-image: -webkit-linear-gradient(#3b5998 25%, #ffffff 75%);
  background-image: linear-gradient(#3b5998 25%, #ffffff 75%);
  content: "\f09a";
  color: #3b5998;
}

.fa-pinterest:after {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #cb2027), color-stop(75%, #ffffff));
  background-image: -webkit-linear-gradient(#cb2027 25%, #ffffff 75%);
  background-image: linear-gradient(#cb2027 25%, #ffffff 75%);
  content: "\f0d2";
  color: #cb2027;
}

.fa-youtube:after {
  background-image:...