Генератор кнопок соцсетей

Онлайн генератор для кнопок социальных сетей

Данный генератор кнопок соцсетей очень прост в использовании. Минимум настроек и вы получаете готовые HTML и CSS.

Установите флажки для соцсетей которые нужно для вас добавить:

Цвет кнопок
Форма кнопок
Вывод SVG-иконок
Добавить Title

 

Внимание! Для кнопок требуется вставлять 2 сгенерированных кода: HTML и CSS. Обязательно!

Код HTML:

  Скопируйте и вставьте данный html-код в нужном месте. Всё что вам остаётся сделать, это заменить значения в атрибуте href="#". Просто замените символ # на ссылку на вашу соцсеть.

 

Код CSS

 

Отправить ссылку в:
# Теория

Размер кнопок

По умолчанию кнопкам задан размер 48px. Это минимальный рекомендуемый стандартами размер для подобных элементов.

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

Размер, это в css свойства для класса .social a. Вот такие строки:

width: 48px;
height: 48px;

width - это ширина кнопки, height - высота кнопки. Можно эти значения изменять. Например 48px можно заменить на 40px.

Размер иконки задан в следующем CSS :

.social svg {
	margin-top: 7px; /* Отступ сверху */
	width: 32px; /* Ширина иконки */
	height: 32px; /* Высота иконки */
}

Эти значения так же можно изменять.