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

Кнопки соц.сетей с эффектом CSS наведения

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

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

По умолчанию идут такие шрифтовые кнопки, где при проверки поставил первый попавшийся шрифт на картинку.

Эффект наведения значков социальных сетей

Установочный процесс:

Этот стиль на шрифтовые кнопки:

Код

HTML

Код

CSS

Код

ul {
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

ul li {
  list-style: none;
}

ul li a {
  width: 80px;
  height: 80px;
  background-color: #fff;
  text-align: center;
  line-height: 80px;
  font-size: 35px;
  margin: 0 10px;
  display: block;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  border: 3px solid #fff;
  z-index: 1;
}

ul li a .icon {
  position: relative;
  color: #403d3d;
  transition: .5s;
  z-index: 3;
}

ul li a:hover .icon {
  color: #f5f2f2;
  transform: rotateY(360deg);
}

ul li a:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f71616;
  transition: .5s;
  z-index: 2;
}

ul li a:hover:before {
  top: 0;
}

ul li:nth-child(1) a:before{
  background: #274c9c;
}

ul li:nth-child(2) a:before{
  background: #55acee;
}

ul li:nth-child(3) a:before {
  background: #076494;
}

ul li:nth-child(4) a:before {
  background: #d25849;
}

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

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

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

08 Октября 2019 Загрузок: 1 Просмотров: 1092 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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