Генератор CSS кнопок
Генератор CSS-кнопок превращает визуальные настройки в готовое правило, которое можно вставить в проект. Кнопке нужны только background-color, color, padding и border-radius; рамка необязательна, а padding пишется сначала по вертикали, затем по горизонтали. Пример: padding: 12px 24px; border-radius: 8px; background-color: #2563eb; color: #ffffff даёт скруглённую синюю кнопку, надпись которой проходит уровень AA WCAG с показателем 5,17:1.
Предпросмотр
Проверка доступности
Настроить
Быстрые Шаблоны
Сгенерированный Код
Популярные
О генераторе CSS кнопок
Генератор CSS-кнопок превращает несколько ползунков и палитр в то единственное правило CSS, которое действительно нужно кнопке. Вы задаёте надпись, цвет фона и текста, размер и насыщенность шрифта, горизонтальный и вертикальный отступы, радиус скругления, толщину и цвет рамки и одну из четырёх глубин тени; необязательный второй цвет превращает плоскую заливку в линейный градиент под 135 градусов. Предпросмотр расположен над регуляторами и представляет собой настоящую HTML-кнопку с вашими значениями в том размере, в котором она появится на вашей странице, так что вы утверждаете ровно то, что отправите в работу.
Две вещи делают результат пригодным к работе, а не декоративным. Во-первых, панель кода имеет две вкладки: многоразовый класс .btn с правилами :hover, :active, :focus-visible и :disabled для вашей таблицы стилей и тот же элемент button со всеми свойствами внутри атрибута style - для конструкторов страниц, блоков CMS и почтовых шаблонов, которые вырезают внешний CSS. Во-вторых, панель доступности измеряет пару цветов по WCAG 2.2 и показывает коэффициент контраста с вердиктом AAA, AA или «не проходит», переключаясь на пороги для крупного текста, когда размер и насыщенность шрифта это допускают. Она же сообщает отрисованную высоту - удвоенный вертикальный отступ, плюс удвоенная рамка, плюс 1,2 размера шрифта, тот межстрочный интервал, который правило фиксирует, чтобы кнопка на экране была ровно такой высоты, как заявлено, - в сравнении с целями 24 x 24 и 44 x 44 CSS-пикселя из критериев 2.5.8 и 2.5.5.
Градиент проверяется по обеим точкам, и показывается худший из двух коэффициентов. Восемь шаблонов - «Основная», «Опасность», «Успех», «Контур», «Капсула», «Градиент», «Приглушённая» и «Неон» - это отправные точки, а не финал: нажмите один и продолжайте двигать ползунки. Ни цвет, ни надпись, ни положение ползунка никуда не отправляются; расчёт контраста, предпросмотр и код выполняются в самой странице, поэтому коэффициент обновляется тем же нажатием клавиши, которое перерисовывает кнопку. Вы копируете один класс - без фреймворка, который надо устанавливать, без шага сборки и без скрипта во время выполнения.
Примеры использования
Как использовать
Впишите нужную надпись в поле «Текст кнопки», затем задайте «Фон» и «Цвет текста» образцами цвета или HEX-кодами в полях рядом.
Ползунками «Размер шрифта», «Горизонтальные отступы», «Вертикальные отступы» и «Радиус границы» задайте форму кнопки, а для контурного вида увеличьте «Ширину рамки» и выберите «Цвет границы».
Выберите Толщину шрифта — Обычный, Средний, Полужирный или Жирный — и Тень: Нет, Маленькая, Средняя или Большая.
Отметьте «Градиент» и выберите второй цвет, чтобы фон превратился в диагональный градиент из двух цветов.
Нажмите карточку в Быстрых Шаблонах — Основная, Контур, Капсула, Градиент, Приглушённая или Неон, — чтобы загрузить готовый стиль и доработать его.
Проверьте живую кнопку на панели «Предпросмотр», переключите вкладку вывода на CSS или HTML + CSS и нажмите значок копирования в блоке с кодом.
Советы профессионалов
- Сначала задайте размер шрифта. Отступы и скругление оценивать намного проще, когда надпись уже нужного размера, а показатель высоты (2 x вертикальный отступ + 2 x толщина рамки + 1,2 x размер шрифта) меняется вместе с ним.
- Загрузите шаблон, а потом донастройте. «Контур» и «Приглушённая» уже стартуют с толщиной рамки больше нуля - это самый быстрый путь к второстепенной кнопке.
- Вводите шестнадцатеричные коды в поле рядом с образцом, а не ищите оттенок в палитре; предпросмотр и коэффициент контраста обновляются на каждом символе.
- Уровень AA обязателен при любом размере текста; меняется только порог: 4,5:1 для обычного текста и 3:1, когда надпись достигает 24px или 18,66px полужирным. Пара с 3:1 может выглядеть нормально на ярком мониторе и стать нечитаемой на улице, поэтому считайте низкий порог потолком, а не целью.
- Градиенты проверяются по обеим точкам, и показывается худший коэффициент: если проваливается только один край, сдвиньте эту точку, а не перекрашивайте всю кнопку.
Устранение неполадок
Скопированный CSS никак не влияет на мою страницу.
Класс перекрыт или вовсе не применён. Убедитесь, что у элемента есть class="btn", подключайте свою таблицу стилей после CSS фреймворка и откройте панель Styles в инструментах разработчика: перечёркнутое объявление означает, что другой селектор выигрывает по специфичности или по порядку.
Градиент выглядит плоским или не появляется вовсе.
Градиент - это фоновое изображение, а не цвет фона. Включите «Градиент», чтобы инструмент выдал background: linear-gradient(...) вместо background-color. Если он всё равно не виден, ищите более позднее сокращённое свойство background или более поздний background-image на том же элементе: сокращённая запись сбрасывает background-image в none и стирает градиент. Более поздний background-color скрыть его не может, потому что CSS Backgrounds 3 рисует цвет под фоновыми изображениями.
Бейдж контраста говорит о провале, но кнопка кажется мне читаемой.
Контраст измеряется по относительной яркости, а не по тому, насколько сочным кажется цвет. Пары средних тонов вроде #f59e0b с белым текстом дают около 2:1, хотя выглядят ярко. Затемните фон или сделайте надпись почти чёрной; коэффициент обновится прямо во время ввода.
Часто задаваемые вопросы
Напишите одно правило для класса и задайте шесть объявлений: background-color, color, font-size, font-weight, padding и border-radius. box-shadow и рамку добавляйте только там, где этого требует макет. Генератор пишет именно такое правило за вас: подвигайте ползунки, посмотрите живой предпросмотр и скопируйте блок .btn со вкладки CSS в свою таблицу стилей.
Вкладка CSS даёт многоразовый класс .btn с правилами состояний, который вставляется в таблицу стилей: изменив один блок, вы поменяете все кнопки сайта. Вкладка HTML + CSS даёт один элемент button с теми же объявлениями внутри атрибута style - именно это нужно конструкторам страниц, блокам CMS и почтовым шаблонам, потому что они вырезают внешние таблицы стилей. Замените его ссылкой с href, если клик ведёт на другой адрес.
Поднимите ползунок «Радиус границы». Около 8px получается смягчённый прямоугольник, который используют большинство интерфейсов, а выше половины высоты кнопки углы сливаются в пилюлю. При шрифте 16px и вертикальном отступе 12px по умолчанию кнопка имеет высоту 43px, поэтому любое скругление примерно за 22 уже выглядит полностью круглым, а 999px в написанном вручную CSS означает то же самое.
Да. При каждом изменении цвета текста или фона он пересчитывает коэффициент контраста по WCAG и показывает AAA, AA или неудачу. Обычному тексту нужно 4,5:1 для AA и 7:1 для AAA; текст 24px или 18,66px полужирным считается крупным, и ему достаточно 3:1 и 4,5:1. Градиентные заливки измеряются по обеим точкам цвета.
Панель размера сообщает отрисованную высоту как удвоенный вертикальный отступ, плюс удвоенную толщину рамки, плюс 1,2 размера шрифта - это межстрочный интервал, который генератор фиксирует в правиле, поэтому число совпадает с кнопкой, нарисованной выше. Критерий 2.5.8 WCAG 2.2 требует цель 24 x 24 CSS-пикселя, а 2.5.5 поднимает её до 44 x 44. Шрифт 16px с вертикальным отступом 12px даёт 43px, что уверенно превышает минимум.
Используйте button, когда клик действует на текущей странице: отправляет форму, открывает диалог, запускает JavaScript. Он получает фокус по умолчанию, срабатывает по Enter и пробелу и поддерживает атрибут disabled. Используйте ссылку с href, когда клик ведёт на другой URL, чтобы клик средней кнопкой и «открыть в новой вкладке» продолжали работать. Оба могут нести один и тот же класс .btn.
В сгенерированном CSS уже есть .btn:hover и .btn:active. Оставьте установленным флажок «Включить состояния focus и disabled в код» - и вы получите ещё .btn:focus-visible с обводкой 3px и отступом 2px, а также .btn:disabled с половинной непрозрачностью и cursor: not-allowed. Никогда не удаляйте обводку фокуса, не заменив её чем-то видимым, иначе те, кто работает с клавиатуры, теряют ориентир.
Да. На выходе обычный CSS без лицензии, без требования упоминания и без зависимостей во время выполнения, а комментарий с указанием источника в первой строке можно удалить. Ничего из введённого вами никуда не отправляется: предпросмотр, сгенерированный код и расчёт контраста выполняются на JavaScript прямо в этой странице, поэтому ваши цвета и надписи не попадают на сервер.
Почти всегда виноваты унаследованные стили. Сброс фреймворка, font-family родителя, глобальное правило для button или селектор с большей специфичностью могут перекрыть вставленный класс. Подключайте свою таблицу стилей после CSS фреймворка, держите .btn на одном элементе и смотрите панель Styles в инструментах разработчика: перечёркнутое объявление точно укажет, какой селектор победил.