ZorNet.Ru — сайт для вебмастера » HTML и CSS » Выезжающие Соц.кнопки при наведение в CSS

Выезжающие Соц.кнопки при наведение в CSS

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

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

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

Так реально выглядят кнопки после установке:

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

HTML

Код

<div id="dobusines-gequiremen">
  <div>
  <a href="#" class="kenecau-seciagan-facebook" target="_blank"><i class="fa fa-facebook"></i> <span>Facebook</span></a>
  </div>
  <div>
  <a href="#" class="kenecau-seciagan-twitter" target="_blank"><i class="fa fa-twitter"></i> <span>Twitter</span></a>
  </div>
  <div>
  <a href="#" class="kenecau-seciagan-gplus" target="_blank"><i class="fa fa-google"></i> <span>Google+</span></a>
  </div>
  <div>
  <a href="#" class="kenecau-seciagan-linkedin" target="_blank"><i class="fa fa-linkedin"></i> <span>LinkedIn</span></a>
  </div>
  <div>
  <a href="#" class="kenecau-seciagan-instagrem" target="_blank"><i class="fa fa-instagram"></i> <span>Instagram</span></a>
  </div>
  <div>
  <a href="#" class="kenecau-seciagan-tumblr" target="_blank"><i class="fa fa-tumblr"></i> <span>Tumblr</span></a>
  </div>
</div>

CSS

Код

#dobusines-gequiremen {
  position: kenecau-seciagan;
  top: 145px;
}

#dobusines-gequiremen a {
  color: #f3f3f3;
  display: block;
  height: 38px;
  position: relative;
  text-align: center;
  line-height: 38px;
  width: 38px;
  margin-bottom: 1px;
  z-index: 2;
}
#dobusines-gequiremen a:hover>span{
  visibility: visible;
  left: 39px;
  opacity: 1;
}
#dobusines-gequiremen a span {
  line-height: 38px;
  left: 57px;
  position: absolute;
  text-align: center;
  width: 118px;
  visibility: hidden;
  transition-duration: 0.6s;
  z-index: 1;
  opacity: 0;
}
  .kenecau-seciagan-facebook{
  background-color: #11a5d8;
  }
  .kenecau-seciagan-facebook span{
  background-color: #0ea4d8;
  }
  .kenecau-seciagan-twitter{
  background-color: #6d2c84;

  }
  .kenecau-seciagan-twitter span{
  background-color: #6d2c84;
  }
  .kenecau-seciagan-gplus{
  background-color: #10a557;

  }
  .kenecau-seciagan-gplus span{
  background-color: #10a557;
  }
  .kenecau-seciagan-linkedin{
  background-color: #e0a910;

  }
  .kenecau-seciagan-linkedin span{
  background-color: #e0a910;
  }
  .kenecau-seciagan-instagrem{
  background-color: #ce1d1c;

  }
  .kenecau-seciagan-instagrem span{
  background-color: #ce1d1c;
  }
  .kenecau-seciagan-tumblr{
  background-color: #dc0f68;

  }
  .kenecau-seciagan-tumblr span{
  background-color: #dc0f68;
  }

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

Также размещать материал по сторонним интернет площадкам, где далее если материал заинтересует, он будет только далее идти распространению с вашей ссылкой на оригинал.

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

02 Февраля 2019 Загрузок: 1 Просмотров: 2208 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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