» »

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

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

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

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

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

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

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

Код
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

HTML

Код
<ul>
  <li>
  <a href="#">
  <i class="fab fa-facebook-f icon"></i> </a>
  </li>
  <li>
  <a href="#"><i class="fab fa-twitter icon"></i></a>
  </li>
  <li>
  <a href="#"><i class="fab fa-linkedin-in icon"></i></a></li>
  <li>
  <a href="#"><i class="fab fa-google-plus-g icon"></i></a></li>
  <li>
  <a href="#"><i class="fab fa-angellist icon"></i></a></li>
</ul>

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;
}

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

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

Демонстрация
2019-10-08 Загрузок: 1 Просмотров: 229 Комментарий: (0)

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

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

Оставь свой отзыв

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