Светящиеся значки социальных сетей на CSS


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

Для достижения этого эффекта я собираюсь использовать свойства CSS3 Если вы решили сменить медео, то здесь все работает на чистых стилях CSS, плюс шрифтовые иконки, что можно самостоятельно сменить. Уникальный хороший набор значков социальных сетей, которые вы можете использовать в своем проекте. Когда вы наводите курсор на значки сложенных друг на друга, они расширяются, чтобы открыть отдельные значки. Букет значков социальных сетей, разработанных с неоновым эффектом при наведении. 

У каждой кнопки свой оттенок цвета. 

Кнопки социальных сетей 

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

HTML 

Код
<div class="zorsanuktumpsa"> 

  <ul> 

  <li class="facebook"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></li> 

  <li class="twitter"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></li> 

  <li class="instagram"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></li> 

  <li class="google"><i class="fa fa-google fa-2x" aria-hidden="true"></i></li> 

  <li class="whatsapp"><i class="fa fa-whatsapp fa-2x" aria-hidden="true"></i></li> 

  </ul> 

</div>

CSS 

Код
.zorsanuktumpsa { 

  position: absolute; 

  top: 50%; 

  left: 50%; 

  transform: translate(-50%, -50%); 

  width: 550px; 





.zorsanuktumpsa ul { 

  list-style: none; 





.zorsanuktumpsa ul li { 

  width: 68px; 

  height: 68px; 

  line-height: 61px; 

  margin: 0 7px; 

  text-align: center; 

  cursor: pointer; 

  border-radius: 87%; 

  border: 3px solid #dedede; 

  float: left; 

  transition: all 0.5s ease; 





.zorsanuktumpsa ul li .fa { 

  color: #cedad3; 

  margin-top: 19px; 

  transition: all 0.5s ease; 





.zorsanuktumpsa ul li:hover.facebook { 

  border: 3px solid #4267b5; 

  box-shadow: 0 0 14px #4267b5; 

  transition: all 0.5s ease; 





.zorsanuktumpsa ul li:hover .fa-facebook { 

  color: #2d4475; 

  text-shadow: 0 0 14px #2d4475; 

  transition: all 0.5s ease; 





/*twitter*/ 

.zorsanuktumpsa ul li:hover.twitter { 

  border: 3px solid #10b0ec; 

  box-shadow: 0 0 14px #10b0ec; 

  transition: all 0.5s ease; 





.zorsanuktumpsa ul li:hover .fa-twitter { 

  color: #0dafec; 

  text-shadow: 0 0 14px #0dafec; 

  transition: all 0.5s ease; 





/* instagram */ 

.zorsanuktumpsa ul li:hover.instagram { 

  border: 3px solid #9e2076; 

  box-shadow: 0 0 14px #9e2076; 

  transition: all 0.5s ease; 





.zorsanuktumpsa ul li:hover .fa-instagram { 

  color: #b13087; 

  text-shadow: 0 0 14px #b13087; 

  transition: all 0.5s ease; 





/* google */ 

.zorsanuktumpsa ul li:hover.google { 

  border: 3px solid #c54333; 

  box-shadow: 0 0 14px #c54333; 

  transition: all 0.5s ease; 





.zorsanuktumpsa ul li:hover .fa-google { 

  color: #c54333; 

  text-shadow: 0 0 14px #c54333; 

  transition: all 0.5s ease; 





/* whatsapp */ 

.zorsanuktumpsa ul li:hover.whatsapp { 

  border: 3px solid #3ba535; 

  box-shadow: 0 0 15px #3ba535; 

  transition: all 0.5s ease; 





.zorsanuktumpsa ul li:hover .fa-whatsapp { 

  color: #3ba535; 

  text-shadow: 0 0 14px #3ba535; 

  transition: all 0.5s ease; 





/* media queries */ 



@media screen and (max-width: 640px){ 

  .zorsanuktumpsa { 

  width: 349px; 

  } 

  .zorsanuktumpsa ul li{ 

  margin-top: 10px; 

  } 

  .zorsanuktumpsa ul li.google{ 

  margin-left: 60px; 

  } 





@media screen and (max-width: 340px){ 

  .wrapper { 

  width: 150px; 

  } 

  .wrapper ul li{ 

  margin:15px; 

  } 

  .wrapper ul li.google{ 

  margin-left: 15px; 

  } 

}

Используя свойства box-shadow и text-shadow, где есть возможность создать множество различных эффектов. 


Комментариев 0
Привет, оставишь комментарий?
Имя:*
E-Mail:


Внимание!

Пожертвование
Мы принимаем WebMoney

R807857153548
Z417987712394
B281910665473
Обновления new
  • Переход направление вверх и вниз на CSS
  • Эффект направление вверх и вниз выпадающего списка, который создан при помощи CSS, где может скрыть информацию и по клику открыть список.

  • Wonde - универсальный бизнес шаблон для uCoz
  • Бесплатный новостной шаблон сайта в стиле минимализма. Хорошее решение для ведения своего блога или портала новостей. Все чисто и аккуратно.&nbs ..

  • Горизонтальный топ пользователей по репутации для uCoz
  • Топ пользователей по репутации как на RootGames.Ru на данный момент, пример можете увидеть в персональной странице пользователя в са ..

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

  • Выпадающее горизонтальное меню с помощью CSS
  • По сути выпадающее меню или навигация представляет собой горизонтальный список разнообразных, но скорей всего тематических запросов под параметр ..

Информация