» »

Выезжающие Соц.кнопки при наведение в 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;
  }

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

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

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

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

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

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