» »

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

Светящиеся значки социальных сетей на 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, где есть возможность создать множество различных эффектов.

Демонстрация
01.06.2018 Просмотров: 273 Комментарий: (0)

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

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

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