Как использовать Генератор кнопок HTML

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

Когда результат устраивает, перейдите в блок HTML и CSS код внизу страницы. Скопируйте HTML-код и вставьте его в нужное место на вашем сайте, а CSS-код добавьте в файл стилей темы или в блок <style> на странице.

Генератор кнопок HTML описание настроек.

Текст и класс

Здесь задаётся надпись на кнопке и её CSS-класс. Класс — это имя, по которому браузер найдёт стиль в вашем CSS-файле. Имя должно начинаться с латинской буквы и может содержать дефис и подчёркивание. Один и тот же класс можно присвоить нескольким кнопкам на странице — все они получат одинаковый стиль.

Шрифт

Определяет внешний вид текста на кнопке. Гарнитура задаёт начертание букв. Размер управляет высотой текста в пикселях. Насыщенность (font-weight) регулирует жирность — от 100 (тонкий) до 900 (чёрный), стандартное значение 400. Курсив наклоняет текст, подчёркивание добавляет линию под буквами. Выравнивание определяет расположение текста внутри кнопки — по левому краю, по центру или по правому.

Цвет текста

Позволяет выбрать цвет надписи двумя способами. Сплошной — один цвет для всего текста. Градиент — плавный переход между двумя цветами; можно задать угол направления и позицию каждого цвета в процентах. Градиентный текст создаётся с помощью CSS-свойства background-clip: text.

Тень текста

Добавляет одну или две тени к тексту. Для каждой тени настраивается сдвиг по горизонтали (X), сдвиг по вертикали (Y), радиус размытия и цвет. Отрицательные значения сдвига перемещают тень влево и вверх. Чем больше радиус размытия — тем мягче и шире тень.

Размер и фон

Ширина и высота задают габариты кнопки в пикселях. Прозрачность (opacity) управляет общей непрозрачностью элемента: значение 1 — полностью непрозрачный, 0 — полностью прозрачный. Фон кнопки может быть трёх типов: сплошной цвет, градиент (линейный переход между двумя цветами с настройкой угла) или изображение по URL с настройкой расположения, размера и повторения.

Закругление углов

CSS-свойство border-radius скругляет углы кнопки. В генераторе каждый из четырёх углов настраивается отдельно — верхний левый, верхний правый, нижний левый, нижний правый. Значение 0 — острый угол, 50% от высоты — полностью скруглённый (таблетка).

Рамка

Добавляет видимую границу вокруг кнопки. Тип определяет вид линии: solid — сплошная, dashed — пунктирная, dotted — точечная, double — двойная, groove, ridge, inset, outset — объёмные эффекты. Толщина задаётся в пикселях, цвет — произвольный. При выборе типа none рамка не отображается.

Трансформация

Изменяет форму и положение кнопки без влияния на соседние элементы. Вращение поворачивает кнопку на заданный угол в градусах. Масштаб растягивает или сжимает кнопку по горизонтали (X) и вертикали (Y) — значение 1 соответствует исходному размеру. Наклон (skew) искажает кнопку по диагонали.

Тень блока

CSS-свойство box-shadow создаёт тень вокруг всего блока кнопки. Параметры: сдвиг по X и Y задают смещение тени, размытие делает края мягкими, растяжение увеличивает или уменьшает тень относительно блока, цвет — произвольный. Опция внутренняя тень (inset) переносит эффект внутрь кнопки.

Состояния: Hover и Active

Hover — стиль кнопки при наведении курсора мыши. Active — стиль в момент нажатия. Для каждого состояния можно задать отдельный цвет фона и текста. Переключение между состояниями в окне предпросмотра позволяет увидеть результат не двигая мышью.

Анимация (Transition)

Плавный переход между обычным состоянием кнопки и hover/active. Тип указывает, какое CSS-свойство анимируется — all означает все свойства одновременно. Время задаётся в секундах. Функция определяет характер движения: ease — плавное начало и конец, linear — равномерное, ease-in-out — медленно начинается и заканчивается, варианты back создают лёгкий отскок.