Социальные кнопки на чистом CSS

Набор кнопок социальных иконок реализованных на чистом CSS. При наведении на кнопку происходит смена фона и цвета иконки.

Менять время анимации можно благодаря свойству transition.

HTML

<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: -webkit-gradient(linear, left top, left bottom, color-stop(25%, #bb0000), color-stop(75%, #ffffff));
 background-image: -webkit-linear-gradient(#bb0000 25%, #ffffff 75%);
 background-image: linear-gradient(#bb0000 25%, #ffffff 75%);
 content: "\f167";
 color: #bb0000;
}

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

html {
 background: -webkit-radial-gradient(#222222, #000000);
 background: radial-gradient(#222222, #000000);
 height: 100%;
 text-align: center;
}

body {
 position: absolute;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
 width: 100%;
}