» »

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

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

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

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

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

Социальные кнопки на CSS

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

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

Код
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

HTML

Код
<div class="satemuco-kelaracive">
  <ul class="nasegtum-uelabac-ivekunad">
  <li> <a href="#"><i class="fa fa-envelope"></i></a></li>
  <li> <a href="#"><i class="fa fa-graduation-cap"></i></a></li>
  <li> <a href="#"><i class="fa fa-shopping-basket"></i></a></li>
  <li> <a href="#"><i class="fa fa-user-secret"></i></a></li>
  <li> <a href="#"><i class="fa fa-taxi"></i></a></li>
  </ul>  
</div>

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

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

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

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

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

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