ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивые кнопки Соц-сетей в 3D-эффекте на CSS

Красивые кнопки Соц-сетей в 3D-эффекте на CSS

Здесь представлены социальные кнопки с красивым дизайном, а также с аналогично оригинальным эффектом при наведении курсора с помощью HTML + CSS. Плюс в том состоит, что здесь не нужно задействовать скрипты и библиотеки, разве только подключить шрифт от font-awesome. Где при открытии страницы мы наблюдаем стандартный дизайн, который выполнен под кнопки, где по центру наблюдаем данный знак социальной сети. Но только стоит навести клик на одну из них, вы получаете отлично выполненный эффект, что на темном фоне смотрится великолепно.

Ведь этот знак начинает вращаться и автоматически становится под другую стилистику, где слой для знаков визуализируются в элемент 3D, и все проходит при эффекте. Если вы новичок и имеете базовые знания HTML и CSS, а также можете создавать эффекты такого типа. То безусловно можно что, то самостоятельно корректировать. Как знаете, когда вы нажимаете определенную кнопку социальных сетей, она не перенаправляет вас на данный ресурс, если прописана ссылка под связанные сайты. Если решили перенаправить пользователя на конкретный веб-сайт, когда происходит нажатие данной кнопки, то просто вставьте ссылку на веб-сайт внутри атрибута href тега привязки.

Вот так выглядит анимация при наведение, что проверенно на работоспособность.

CSS3 - 3D-эффект наведения курсора на кнопки социальных сетей

Переходим к установки:

Для того, чтоб появились знаки, то нужно прописать в HEAD стили.

Код

HTML

Код

<div class="icons">
  <a href="#">
  <div class="layer">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span class="fab fa-facebook-f"></span>
  </div>
  <div class="text">
  Facebook
  </div>
  </a>
  <a href="#">
  <div class="layer">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span class="fab fa-twitter"></span>
  </div>
  <div class="text">
  Twitter
  </div>
  </a>
  <a href="#">
  <div class="layer">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span class="fab fa-instagram"></span>
  </div>
  <div class="text">
  Instagram
  </div>
  </a>
  <a href="#">
  <div class="layer">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span class="fab fa-linkedin-in"></span>
  </div>
  <div class="text">
  Linkedin
  </div>
  </a>
  <a href="#">
  <div class="layer">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span class="fab fa-youtube"></span>
  </div>
  <div class="text">
  YouTube
  </div>
  </a>
  </div>

CSS

Код

html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #000;
}
.icons{
  display: inline-flex;
}
.icons a{
  margin: 0 25px;
  text-decoration: none;
  color: #fff;
  display: block;
  position: relative;
}
.icons a .layer{
  width: 55px;
  height: 55px;
  transition: transform 0.3s;
}
.icons a:hover .layer{
  transform: rotate(-35deg) skew(20deg);
}
.icons a .layer span{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 5px;
  transition: all 0.3s;
}
.icons a .layer span.fab{
  font-size: 30px;
  line-height: 55px;
  text-align: center;
}
.icons a:hover .layer span:nth-child(1){
  opacity: 0.2;
}
.icons a:hover .layer span:nth-child(2){
  opacity: 0.4;
  transform: translate(5px, -5px);
}
.icons a:hover .layer span:nth-child(3){
  opacity: 0.6;
  transform: translate(10px, -10px);
}
.icons a:hover .layer span:nth-child(4){
  opacity: 0.8;
  transform: translate(15px, -15px);
}
.icons a:hover .layer span:nth-child(5){
  opacity: 1;
  transform: translate(20px, -20px);
}
.icons a:nth-child(1) .layer span,
.icons a:nth-child(1) .text{
  color: #3e64af;
  border-color: #3e64af;
}
.icons a:nth-child(2) .layer span,
.icons a:nth-child(2) .text{
  color: #2fa7f1;
  border-color: #2fa7f1;
}
.icons a:nth-child(3) .layer span,
.icons a:nth-child(3) .text{
  color: #ec467f;
  border-color: #ec467f;
}
.icons a:nth-child(4) .layer span,
.icons a:nth-child(4) .text{
  color: #2867B2;
  border-color: #2867B2;
}
.icons a:nth-child(5) .layer span,
.icons a:nth-child(5) .text{
  color: #ff0000;
  border-color: #ff0000;
}
.icons a:hover:nth-child(1) .layer span{
  box-shadow: -1px 1px 3px #4267B2;
}
.icons a:hover:nth-child(2) .layer span{
  box-shadow: -1px 1px 3px #1DA1F2;
}
.icons a:hover:nth-child(3) .layer span{
  box-shadow: -1px 1px 3px #E1306C;
}
.icons a:hover:nth-child(4) .layer span{
  box-shadow: -1px 1px 3px #2867B2;
}
.icons a:hover:nth-child(5) .layer span{
  box-shadow: -1px 1px 3px #ff0000;
}
.icons a .text{
  position: absolute;
  left: 50%;
  bottom: -5px;
  opacity: 0;
  font-weight: 500;
  transform: translateX(-50%);
  transition: bottom 0.3s ease, opacity 0.3s ease;
}
.icons a:hover .text{
  bottom: -35px;
  opacity: 1;
}

Эти ссылки и кнопки социальных сетей позволяют посетителям вашего веб-сайта и зрителям контента легко делиться вашим контентом со своими связями и сетями в социальных сетях.

Ссылка для публикации в социальных сетях - это URL-адрес, при нажатии на который заполняется фиксированное сообщение и изображение, где можно поделиться в социальных сетях.

Демонстрация

23 Июля 2021 Загрузок: 2 Просмотров: 1680 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0