Ниже онлайн-генератор кнопок: цвет, градиент, тень, скругление — отдельно для обычного состояния, наведения и нажатия. Сразу готовый HTML с CSS. Код считается в браузере, ничего на сервер не уходит.
Генератор кнопок
Обычное · наведение · нажатие → HTML + CSS
Превью
Обычное состояние
Тег
Размер (для всех состояний)
Состояние
Заливка
Стиль
Пресет тени
HTML
CSS
Кнопка в HTML: <a> или <button>
Если элемент ведёт на другую страницу или якорь — берите <a href=»…»>. Если это действие на текущей странице (отправить форму, открыть модалку, запустить скрипт) — <button type=»button»>. Не оборачивайте кнопку в ссылку и не вешайте onclick на div: скринридеры и клавиатура ожидают настоящий интерактивный элемент.
Наведение, нажатие, фокус и доступность
Во вкладках При наведении и При нажатии по умолчанию включено Автозатемнение: стили берутся из обычной кнопки и слегка затемняются — даже если вы настроили только обычное состояние, :hover и :active уже есть в CSS. Снимите галочку, если нужны свои стили для наведения или нажатия. Обязательно добавьте видимый :focus-visible (outline или box-shadow): без него клавиатурная навигация «теряет» кнопку. Проверьте контраст текста и фона (WCAG).
.btn:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 3px;
}Сплошная, контур, призрак
Сплошная — основная CTA: заливка и контрастный текст. Контур — вторичное действие: прозрачный фон и цветная рамка. Призрак — третьеуровневая: без рамки, цветной текст, лёгкий фон при наведении. В одной группе кнопок обычно одна сплошная и одна–две контурных или «призрачных».
Скругление и отступы лучше держать в одной шкале с остальным UI (карточки, поля ввода). Имя класса вроде .btn / .btn-primary проще переиспользовать, чем инлайн-стили.
Комментарии
Пока нет комментариев — можете написать первый.