ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Круглые иконки социальных сетей на CSS

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

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

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

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

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

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

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

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

Код

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 Ноября 2017 Просмотров: 2103 Комментариев: (0)

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

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

Kosten

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