Генератор CSS-кнопок

Что входит в сгенерированный код

В HTML используется настоящий элемент <button type="button">, а видимая надпись помещается внутрь span. CSS охватывает шесть полезных состояний:

• Обычное для исходного вида кнопки
• Наведение для устройств с указателем
• Фокус с клавиатуры через :focus-visible
• Нажатие в момент активации элемента
• Отключено через стандартное свойство disabled
• Загрузка через aria-busy="true"

Ваше приложение само определяет, когда кнопка отключена или занята. Генератор создаёт правила оформления, но не придумывает состояние приложения и не назначает обработчик нажатия.

Проверка контраста не является сертификатом

Редактор вычисляет наименьший контраст текста среди основного цвета, конечного цвета градиента, цвета при наведении и цвета при нажатии. Для обычного текста ориентир составляет 4,5:1. Контур фокуса также сравнивается со светлой поверхностью предпросмотра, а ориентир для нетекстового элемента составляет 3:1.

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

Размер области нажатия и движение

Экспортируемое правило задаёт минимальную ширину и высоту 44 px. Такой размер удобен для многих сенсорных интерфейсов и превышает минимум 24 CSS px из критерия успешности 2.5.8 WCAG 2.2. В готовом продукте всё равно нужно учитывать компоновку, расстояния, исключения и рекомендации платформы.

Смещение при наведении и нажатии отключается, если пользователь предпочитает уменьшенную анимацию. Индикатор загрузки замедляется, а не исчезает, поэтому занятое состояние остаётся заметным.

Границы безопасного вывода

Видимая надпись нормализуется, ограничивается 120 графемными кластерами, очищается от невидимых управляющих символов направления и экранируется в HTML-фрагменте и скачиваемом файле. Цвета должны быть шестизначными шестнадцатеричными значениями. Каждая числовая настройка округляется и ограничивается диапазоном, указанным рядом с полем.

Полный редактор работает в памяти браузера. В дополнительном четырёхстраничном режиме версия дизайна хранится в sessionStorage текущей вкладки. Текст и параметры дизайна не добавляются в URL этапов и не передаются на наши серверы.

Использование состояния загрузки

Устанавливайте и удаляйте атрибут занятости из кода приложения:

<button type="button" class="generated-button" aria-busy="true" disabled>
  <span class="generated-button__label">Сохранение</span>
</button>

aria-busy сообщает, что обновление ещё выполняется. Добавьте также disabled, если нужно предотвратить повторную активацию. После завершения операции удалите оба атрибута и выведите важное сообщение об успехе или ошибке в подходящей области состояния.