3D-эффект для social media при наведении с помощью CSS

Красивый и стильный 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;
}

Источник
Оцените статью
( 1 оценка, среднее 5 из 5 )
Поделишься в соц. сетях? 🙂 Спасибо 🙏
Devtutor
Добавить комментарий