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

Кнопки социальных сетей с Hover эффектом

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

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

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

Анимированные кнопки социальных сетей CSS при наведении курсора

Установка:

Если не установлены шрифтовые иконки, то в NEAD:

Код

HTML

Код

<div class="knopochka">
  <div class="sentation">
  <div class="piction">
<i class="fab fa-facebook-f"></i></div>
<span>Facebook</span>
  </div>
<div class="sentation">
  <div class="piction">
<i class="fab fa-twitter"></i></div>
<span>Twitter</span>
  </div>
<div class="sentation">
  <div class="piction">
<i class="fab fa-dribbble"></i></div>
<span>dribbble</span>
  </div>
<div class="sentation">
  <div class="piction">
<i class="fab fa-github"></i></div>
<span>Github</span>
  </div>
<div class="sentation">
  <div class="piction">
<i class="fab fa-youtube"></i></div>
<span>YouTube</span>
  </div>
</div>

CSS

Код

.knopochka .sentation {
  display: inline-block;
  height: 60px;
  width: 60px;
  float: left;
  margin: 0 5px;
  overflow: hidden;
  color: #f3eded;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: inset 2px 2px 2px 0px rgb(183 178 178 / 50%), inset -7px -7px 10px 0px rgb(16 16 16 / 10%), 7px 7px 20px 0px rgb(14 14 14 / 10%), 4px 4px 5px 0px rgb(14 14 14 / 10%);
  text-shadow: 2px 2px 3px rgba(255,255,255,.5), -4px -4px 6px rgba(116, 125, 136, .2);
  transition: all 0.3s ease-out;
}
.knopochka .sentation:hover{
  width: 200px;
}
.knopochka .sentation .piction{
  display: inline-block;
  height: 60px;
  width: 60px;
  text-align: center;
  border-radius: 50px;
  box-sizing: border-box;box-shadow: inherit;
  box-shadow: inherit;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.knopochka .sentation:nth-child(1) .piction{
  background: #4267B2;
}
.knopochka .sentation:nth-child(2) .piction{
  background: #1DA1F2;
}
.knopochka .sentation:nth-child(3) .piction{
  background: #E1306C;
}
.knopochka .sentation:nth-child(4) .piction{
  background: #333;
}
.knopochka .sentation:nth-child(5) .piction{
  background: #ff0000;
}

.knopochka .sentation:nth-child(1):hover .piction{
  background: #4267B2;
}
.knopochka .sentation:nth-child(2):hover .piction{
  background: #1DA1F2;
}
.knopochka .sentation:nth-child(3):hover .piction{
  background: #E1306C;
}
.knopochka .sentation:nth-child(4):hover .piction{
  background: #333;
}
.knopochka .sentation:nth-child(5):hover .piction{
  background: #ff0000;
}
.knopochka .sentation .piction i{
  font-size: 25px;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.knopochka .sentation:hover .piction i{
  color: #fff;
}
.knopochka .sentation span{
  font-size: 20px;
  font-weight: 500;
  line-height: 60px;
  margin-left: 10px;
  transition: all 0.3s ease-out;
}
.knopochka .sentation:nth-child(1) span{
  color: #4267B2;
}
.knopochka .sentation:nth-child(2) span{
  color: #1DA1F2;
}
.knopochka .sentation:nth-child(3) span{
  color: #FB2175;
}
.knopochka .sentation:nth-child(4) span{
  color: #333;
}
.knopochka .sentation:nth-child(5) span{
  color: #ff0000;
}

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

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

16 Января 2021 Загрузок: 1 Просмотров: 1024 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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