» »

Круглые иконки социальных сетей на CSS

Круглые иконки социальных сетей на CSS

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

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

Также есть похожие кнопки под игровые ресурсы, что также редактируются по теме.

Так проверил на тестовом сайте, где палитра изменена, там наведен клик.

Кнопки для постинга материалов в социальные сети

Ставим так где считаете нужным

Код
<article class="gapudernaryl">
  <ul class="knopka_zornet">
  <li><a href="#"><i class="fa fa-delicious"></i></a></li>
  <li><a href="#"><i class="fa fa-facebook-official"></i></a></li>
  <li><a href="#"><i class="fa fa-telegram"></i></a></li>
  <li><a href="#"><i class="fa fa-internet-explorer"></i></a></li>
  </ul>  
  </article>

CSS

Код
@media (min-width: 1200px)
.gapudernaryl {
  width: 100%;
}

.knopka_zornet {
  text-align: center;
  overflow: hidden;
  padding: 0;
  list-style: none;
  position: relative;
  margin: 0;
  margin-top: 17px;
  z-index: 9;
}
.knopka_zornet > li {
  cursor: pointer;
  display: inline-block;
  margin: 0 7px;
  border-radius: 5px;
  overflow: hidden;
}
.knopka_zornet > li a {
  border: 4px solid rgba(32, 199, 63, 0.96);
  border-radius: 500px;
  width: 53px;
  height: 53px;
  display: block;
  background: rgba(0, 0, 0, 0.49);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.knopka_zornet > li a i {
  font-size: 23px;
  margin-top: 15px;
  color: rgba(245, 255, 246, 0.99);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.knopka_zornet > li a:hover {
  background: rgba(14, 70, 115, 0.95);
  border: 4px solid rgba(43, 220, 234, 0.94);
  transition: all 0.3s ease;
}

Не забываем подключить шрифт на кнопки, как сделать, в статье подробно написано.
17.11.2017 Просмотров: 357 Комментарий: (0)

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

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

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