Содержание
Подключаем font awesome для иконок
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
HTML
<div class="social-btns">
<a class="btn facebook" href="#"><i class="fa fa-facebook"></i></a>
<a class="btn twitter" href="#"><i class="fa fa-twitter"></i></a>
<a class="btn google" href="#"><i class="fa fa-google"></i></a>
<a class="btn dribbble" href="#"><i class="fa fa-dribbble"></i></a>
<a class="btn skype" href="#"><i class="fa fa-skype"></i></a>
</div>
CSS
body {
background-color: #ecf0f1;
}
.social-btns .btn,
.social-btns .btn:before,
.social-btns .btn .fa {
-webkit-transition: all 0.35s;
transition: all 0.35s;
-webkit-transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition-timing-function: cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-btns .btn:before {
top: 90%;
left: -110%;
}
.social-btns .btn .fa {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
.social-btns .btn.facebook:before {
background-color: #3b5998;
}
.social-btns .btn.facebook .fa {
color: #3b5998;
}
.social-btns .btn.twitter:before {
background-color: #3cf;
}
.social-btns .btn.twitter .fa {
color: #3cf;
}
.social-btns .btn.google:before {
background-color: #dc4a38;
}
.social-btns .btn.google .fa {
color: #dc4a38;
}
.social-btns .btn.dribbble:before {
background-color: #f26798;
}
.social-btns .btn.dribbble .fa {
color: #f26798;
}
.social-btns .btn.skype:before {
background-color: #00aff0;
}
.social-btns .btn.skype .fa {
color: #00aff0;
}
.social-btns .btn:focus:before,
.social-btns .btn:hover:before {
top: -10%;
left: -10%;
}
.social-btns .btn:focus .fa,
.social-btns .btn:hover .fa {
color: #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
.social-btns {
height: 90px;
margin: auto;
font-size: 0;
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.social-btns .btn {
display: inline-block;
background-color: #fff;
width: 90px;
height: 90px;
line-height: 90px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
border-radius: 28%;
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1);
opacity: 0.99;
}
.social-btns .btn:before {
content: '';
width: 120%;
height: 120%;
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.social-btns .btn .fa {
font-size: 38px;
vertical-align: middle;
}
