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

Иконки Соц. сетей с эффектом наведении

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

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

Также самостоятельно выставляем тематические кнопки:

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

Если кто то не подключил шрифтовые кнопки, то вверх или вниз выставляем.

Код

HTML

Код

CSS

Код

.nasegtum-uelabac-ivekunad {
  margin:48px auto;
  padding:0px;
  text-align:center;
  width:100%;
}
.nasegtum-uelabac-ivekunad li {
  Display:inline-block;
  margin:10px;
  }
.nasegtum-uelabac-ivekunad li a {
  color:#f9fafd;
  display:inline-block;
  font-size:24px;
  height:48px;
  width:48px;
  text-decoration:none;
  position:relative;
  margin-bottom:19px;
  font-family:'FontAwesome';
  transition:all 0.5s ease;
  pointer-events:auto;
}
.nasegtum-uelabac-ivekunad li a i {
  line-height:50px;
}
.nasegtum-uelabac-ivekunad li a:hover {
  color:#3559a7;
  background-color:#f2f2f5;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius: 30px;
}

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

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

28 Апреля 2019 Загрузок: 1 Просмотров: 1352 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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