*, *:after, *:before {
    box-sizing: border-box;
  }
  
  .fa {
    height: 2em;
    font-size: 1.5em;
    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;
    transition: 0.5s;
    top: 50%;
    width: 100%;
  }
  .fa:before {
    color: white;
    transform: translate3D(0, -50%, 0);
    z-index: 2;
  }
  .fa:after {
    padding-bottom: 25%;
    padding-top: 300%;
    top: 0;
  }
  .fa:hover:after {
    transform: translate3D(0, -73%, 0);
  }
  .fa:hover:before {
    transform: translate3D(0, -250%, 0);
  }
  
  .fa-twitter:after {
      border-radius: 10px 10px 10px 10px;
    background-image: linear-gradient(#00acee 25%, #ffffff 75%);
    content: "Ir";
    color: #00acee;
  }
  
  .fa-facebook:after {
    border-radius: 10px 10px 10px 10px;
    background-image: linear-gradient(#3b5998 25%, #ffffff 75%);
    content: "Ir";
    color: #3b5998;
  }
  
  .fa-pinterest:after {
    background-image: linear-gradient(#cb2027 25%, #ffffff 75%);
    content: "";
    color: #cb2027;
  }
  
  .fa-youtube:after {
    border-radius: 10px 10px 10px 10px;
    background-image: linear-gradient(#bb0000 25%, #ffffff 75%);
    content: "Ir";
    color: #b00;
  }
  
  .fa-soundcloud:after {
    background-image: linear-gradient(#ff5700 25%, #ffffff 75%);
    content: "\\f1be\a";
    color: #FF5700;
  }