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

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

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

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

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

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

HTML

Код

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 Июня 2018 Просмотров: 1576 Комментариев: (0)

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

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

Kosten

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