ZorNet.Ru — сайт для вебмастера » HTML и CSS » Светящийся эффект значков соц-сетей на CSS

Светящийся эффект значков соц-сетей на CSS

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

По умолчанию все представленные знаки находятся на начальной стадии, а точнее на них не присутствует эффект свечения. Но когда только стоит навести на один из элементов, то автоматически появляется свечение под заданной гаммой цвета А если подробнее, то конкретный значок начинает светиться по сторонам, что на темном фоне смотрится просто великолепно. Но это не о чем, не говорит, что на светлом фоне не так будет отображаться заданная палитра, тут главное правильно выставить оттенок, и он на белом фоне засверкает.

При проверки по работе кнопок:

Кнопка с красивым эффектом при наведение клика

Установка:

Шрифтовые кнопки в HEAD

Код
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">

HTML

Код
<ul>
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>

CSS

Код
ul{
  display: flex;
}
ul li{
  position: relative;
  display: block;
  color: #666;
  font-size: 30px;
  height: 60px;
  width: 60px;
  background: #171515;
  line-height: 60px;
  border-radius: 50%;
  margin: 0 15px;
  cursor: pointer;
  transition: .5s;
}
ul li:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  /* background: #d35400; */
  border-radius: 50%;
  transform: scale(.9);
  z-index: -1;
  transition: .5s;
}
ul li:nth-child(1):before{
  background: #4267B2;
}
ul li:nth-child(2):before{
  background: #1DA1F2;
}
ul li:nth-child(3):before{
  background: #E1306C;
}
ul li:nth-child(4):before{
  background: #2867B2;
}
ul li:nth-child(5):before{
  background: #ff0000;
}
ul li:hover:before{
  filter: blur(3px);
  transform: scale(1.2);
  /* box-shadow: 0 0 15px #d35400; */
}
ul li:nth-child(1):hover:before{
  box-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover:before{
  box-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover:before{
  box-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover:before{
  box-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover:before{
  box-shadow: 0 0 15px #ff0000;
}
ul li:nth-child(1):hover{
  color: #456cba;
  box-shadow: 0 0 15px #4267B2;
  text-shadow: 0 0 15px #4267B2;
}
ul li:nth-child(2):hover{
  color: #26a4f2;
  box-shadow: 0 0 15px #1DA1F2;
  text-shadow: 0 0 15px #1DA1F2;
}
ul li:nth-child(3):hover{
  color: #e23670;
  box-shadow: 0 0 15px #E1306C;
  text-shadow: 0 0 15px #E1306C;
}
ul li:nth-child(4):hover{
  color: #2a6cbb;
  box-shadow: 0 0 15px #2867B2;
  text-shadow: 0 0 15px #2867B2;
}
ul li:nth-child(5):hover{
  color: #ff1a1a;
  box-shadow: 0 0 15px #ff0000;
  text-shadow: 0 0 15px #ff0000;
}

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

Но и про стилистику не нужно забывать, ведь в закрепленном CSS мы всю цветовую палитру настраиваем, ведь может так получиться, что некоторым нужно изменить. А точнее выставить тот оттенок, который более соответствует основному дизайн сайта.

Демонстрация
01 Марта 2021 Загрузок: 6 Просмотров: 1379 Комментариев: (3)

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

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

Оставь свой отзыв

Комментарии: 3
DeaR
DeaR 10 Декабря 2021 15:371
0
ОГОНЬ, классные кнопки
Подскажите, как их по центру замостить? Также в ряд но что-бы по центру! Я пока обучаюсь)
huaweiowez
huaweiowez 16 Мая 2022 10:422
0
Подскажите, как их по центру замостить? Также в ряд но что-бы по центру! Я пока обучаюсь
Kosten
Kosten 16 Мая 2022 11:023
0
huaweiowez, рекомендую ознакомиться с данной статьей, где в следующем разберетесь как устанавливать по центру, давно писал, и сам пользуюсь.

Там много вариантов, идут через значение или лучше через класс.

Также рекомендую и эту статью, если первая по знакам, то это по предметам, типа логотипа и много другого, как установить по центру.

Статья №2 - http://zornet.ru/load....-0-9843
avatar