Красивый и стильный 3D-эффект при наведении на соцкнопки, реализованный при помощи CSS.
HTML
Подключаем Font Awesome (иконочный шрифт)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<ul class="socialIcons">
<li><a href="#" class="facebook"><i class="fa fa-facebook "></i></a></li>
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a></li>
<li><a href="#" class="googlePlus"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#" class="youtube"><i class="fa fa-youtube"></i></a></li>
</ul>
CSS
.socialIcons {
padding: 0;
margin: 0;
list-style-type: none;
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 70px;
text-align: center;
}
.socialIcons li {
display: inline-block;
margin: auto 10px;
}
.socialIcons li a {
text-align: center;
display: inline-block;
font-size: 4rem;
height: 100px;
width: 100px;
line-height: 100px;
color: #F1DABF;
transition: all ease 0.5s;
text-shadow: 0px 0px 1px black, 0px 0px 1px black;
transform: rotateX(-30deg);
}
.socialIcons li a:hover {
transform: rotateX(-30deg) translateY(-20px);
}
.socialIcons li a:hover.facebook {
color: #365899;
text-shadow: 0px 0px 0px #365899, 0px 1px 2px #2f4d86, 0px 2px 2px #294273, 0px 3px 2px #223760, 0px 4px 2px #1b2d4e, 0px 5px 2px #15223b, 0px 6px 2px #0e1728, 0px 7px 2px #070c15, 0px 8px 2px #010102, 0px 9px 2px black, 0px 10px 2px black;
}
.socialIcons li a:hover.twitter {
color: #1DA1F2;
text-shadow: 0px 0px 0px #1DA1F2, 0px 1px 2px #0d95e8, 0px 2px 2px #0c85d0, 0px 3px 2px #0b76b8, 0px 4px 2px #0967a0, 0px 5px 2px #085788, 0px 6px 2px #064870, 0px 7px 2px #053857, 0px 8px 2px #04293f, 0px 9px 2px #021927, 0px 10px 2px #010a0f;
}
.socialIcons li a:hover.instagram {
color: #C32AA3;
text-shadow: 0px 0px 0px #C32AA3, 0px 1px 2px #ae2591, 0px 2px 2px #992180, 0px 3px 2px #841c6e, 0px 4px 2px #6f185d, 0px 5px 2px #5a134b, 0px 6px 2px #450f3a, 0px 7px 2px #300a28, 0px 8px 2px #1b0617, 0px 9px 2px #060105, 0px 10px 2px black;
}
.socialIcons li a:hover.googlePlus {
color: #DB4437;
text-shadow: 0px 0px 0px #DB4437, 0px 1px 2px #d33426, 0px 2px 2px #bd2e22, 0px 3px 2px #a7291e, 0px 4px 2px #92241a, 0px 5px 2px #7c1e16, 0px 6px 2px #671912, 0px 7px 2px #51140f, 0px 8px 2px #3b0f0b, 0px 9px 2px #260907, 0px 10px 2px #100403;
}
.socialIcons li a:hover.youtube {
color: #FF0000;
text-shadow: 0px 0px 0px #FF0000, 0px 1px 2px #e60000, 0px 2px 2px #cc0000, 0px 3px 2px #b30000, 0px 4px 2px #990000, 0px 5px 2px maroon, 0px 6px 2px #660000, 0px 7px 2px #4d0000, 0px 8px 2px #330000, 0px 9px 2px #1a0000, 0px 10px 2px black;
}
.otherPens {
position: absolute;
color: #212121;
font-weight: 600;
text-decoration: none;
font-size: 1.2rem;
}
