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

Создайте кнопку с текстом и кодом HTML и CSS. Настройте форму и цвета, проверьте настоящую кнопку или имитацию состояния и скопируйте код.

Предпросмотр

Большие тени могут обрезаться в предпросмотре; скопированный CSS не меняется.

Кнопка и состояния

Введите буквальный текст и один класс. Настройте каждое экспортируемое состояние.

Текст кнопки

Класс

Шрифт

Размер шрифта (px)

12–32 px

Насыщенность

Горизонтальный отступ (px)

0–64 px

Вертикальный отступ (px)

0–32 px

Толщина рамки (px)

0–8 px

Радиус углов (px)

0–64 px

Редактируемое состояние

Фон

Текст

Рамка

Использовать тень

Общая тень

Смещение по горизонтали (px)

-32–32 px

Смещение по вертикали (px)

-32–32 px

Размытие (px)

0–48 px

Расширение (px)

-16–16 px

Цвет тени

Экспортировать отключённую кнопку

Код кнопки

Экспортируемая кнопка включена.

Режим просмотра

Фон просмотра

Обычное: 5,17:1 Соответствует ориентиру 4.5:1

Наведение: 6,70:1 Соответствует ориентиру 4.5:1

Нажатие: 8,72:1 Соответствует ориентиру 4.5:1

Отключено: 3,90:1 Неактивные элементы освобождены от этого требования к контрасту текста.

Контур фокуса относительно фона: 5,17:1

Ориентир рассчитан для размера 16 px и насыщенности 600; порог 4.5:1.

Для контура используется ориентир 3:1 относительно выбранного фона.

Контраст сплошных цветов не подтверждает доступность. Проверьте фокус клавиатуры, окружающие стили и реальное использование.

Состояние и контраст

Передний план #FFFFFF на фоне #2563EB.

Относительная яркость: текст или контур 1.000000, фон 0.153152.

(светлее + 0,05) / (темнее + 0,05) = 5,17:1.

Ориентир рассчитан для размера 16 px и насыщенности 600; порог 4.5:1.

Нажатие перекрывает наведение; focus-visible добавляет независимый контур.

Показанное значение округлено; сравнение выполняется без округления.

HTML

<button type="button" class="generated-button" dir="auto">Сохранить изменения</button>

CSS

button.generated-button {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 20px;
  border: 1px solid #2563EB;
  border-radius: 8px;
  background-color: #2563EB;
  background-image: none;
  color: #FFFFFF;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: none;
  text-shadow: none;
  vertical-align: middle;
  opacity: 1;
  cursor: pointer;
  box-shadow: none;
}

button.generated-button:hover:not(:disabled) {
  background-color: #1D4ED8;
  color: #FFFFFF;
  border-color: #1D4ED8;
  box-shadow: none;
}

button.generated-button:active:not(:disabled) {
  background-color: #1E40AF;
  color: #FFFFFF;
  border-color: #1E40AF;
  box-shadow: none;
}

button.generated-button:focus-visible:not(:disabled) {
  outline: 3px solid #2563EB;
  outline-offset: 3px;
}

button.generated-button:disabled {
  background-color: #E5E7EB;
  color: #6B7280;
  border-color: #9CA3AF;
  box-shadow: none;
  cursor: default;
}

Текст и стили остаются в браузере; копирование выполняется явно.

Настройте, проверьте и скопируйте

Введите буквальный текст и допустимый класс. Выберите шрифт, размер, насыщенность, отступы и рамку.
Настройте цвета и тени состояний. Фокус меняет только контур. Выберите, будет ли экспортируемая кнопка отключена.
Проверьте настоящий фокус в режиме «Вживую» клавишей Tab. Изучите показатели контраста и отдельно скопируйте HTML и CSS.

Встроенная семантика и состояния

HTML содержит встроенный элемент button с type="button", классом и буквальным текстом. Действие не задано; добавьте его в своём приложении.

Наведение и нажатие могут совпадать. Нажатие следует после наведения и задаёт все свойства заново, включая отсутствие тени. Фокус добавляет независимый контур.

Атрибут disabled действительно отключает кнопку; одного серого цвета недостаточно. Остальные элементы управления остаются доступными.

Один ограниченный класс обеспечивает соответствие HTML и селекторов. Пробелы, точки, запятые и псевдоклассы отклоняются.

Примеры текста и контраста

Текст Сохранить <черновик> и "отправить" 🚀 остаётся буквальным. HTML экранирует знаки, поэтому дополнительный элемент не создаётся.

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

Контраст чёрного и белого равен 21:1, одинаковых цветов — 1:1. Пороги зависят от размера и насыщенности; сравнение выполняется без округления.

Ограничения оформления и доступности

Доступны непрозрачные сплошные цвета, общая форма тени и системные шрифты. Градиенты, анимации и действия приложения не создаются.

Имитация состояния не проверяет фокус клавиатуры. Используйте режим «Вживую»; обрезанная в предпросмотре тень не меняет скопированный CSS.

Контраст и минимальный размер 44 пикселя не гарантируют доступность. Проверьте окружение, клавиатуру и вспомогательные технологии.

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

Локальное редактирование

Инструмент не загружает данные и не создаёт историю, ссылки со значениями или запросы удалённых шрифтов. Копирование выполняется явно. Сервисы сайта и расширения работают отдельно.

Вопросы о кнопках

Нажатие следует после Hover и полностью задаёт оформление. Контур focus-visible остаётся независимым.

Нет. Образец неактивен. Проверьте встроенный фокус в режиме «Вживую» клавишей Tab.

Нет. Поведение задаёт атрибут disabled, а не цвет.

Нет. Введите один класс до 48 символов: сначала буква ASCII, затем буквы, цифры, дефисы или подчёркивания.

Текст остаётся буквальным. Знаки экранируются в HTML; элементы и обработчики не вставляются.

Нет. Значения относятся к непрозрачным цветам sRGB и заданным параметрам шрифта; они не подтверждают доступность фокуса или клавиатуры.

Каждое состояние отдельно выбирает тень. Если она выключена при нажатии, CSS задаёт none даже при наличии тени наведения.

История и ссылки с данными не создаются. В буфер попадает только явно выбранный код.

Источники

Стандарты и рекомендации для встроенных кнопок и их состояний.

Проверено 13 ноября 2026 года.

Генератор поддерживает ограниченную грамматику, а не любой допустимый CSS.

SVG в PNG

Преобразуйте SVG-файл или вставленный код в PNG: задайте размер, прозрачный фон или цвет и используйте встроенные шрифты.

Открыть инструмент — SVG в PNG

Генератор CSS-фильтров

Настройте порядок эффектов, сравните образец и скопируйте объявление filter.

Открыть инструмент — Генератор CSS-фильтров

Калькулятор плавного размера шрифта

Задайте размеры шрифта для двух значений ширины окна. Скопируйте CSS с единицами rem и изучите модель, рассчитанную по тем же коэффициентам, что и в коде.

Открыть инструмент — Калькулятор плавного размера шрифта

Генератор CSS border-radius

Настройте восемь радиусов, посмотрите результат и скопируйте CSS в пикселях или процентах.

Открыть инструмент — Генератор CSS border-radius

Генератор CSS Grid

Создайте пример CSS Grid с дорожками, размещением и именованными областями. Просматривайте, копируйте CSS и HTML или скачивайте полный пример.

Открыть инструмент — Генератор CSS Grid

Генератор CSS Flexbox

Создайте пример Flexbox с элементами управления контейнером и элементами, явными осями макета, соответствующими CSS и HTML, а также локальной загрузкой полного примера.

Открыть инструмент — Генератор CSS Flexbox

Генератор CSS-тени текста

Создавайте упорядоченные тени текста, просматривайте пример и копируйте точный CSS.

Открыть инструмент — Генератор CSS-тени текста

Генератор преобразований CSS

Создавайте повторяемые двумерные преобразования CSS, редактируйте px или процентный перевод и начало координат, проверяйте поле ссылки и копируйте точные текущие объявления.

Открыть инструмент — Генератор преобразований CSS

Генератор теней CSS

Создавайте упорядоченные слои box-shadow с предпросмотром и копируйте код.

Открыть инструмент — Генератор теней CSS

Водяной знак на изображениях

Добавьте текст или логотип к изображениям, проверьте результаты и скачайте отдельные файлы или ZIP.

Открыть инструмент — Водяной знак на изображениях

Генератор CSS-градиентов

Создавайте линейные и радиальные градиенты с цветами, непрозрачностью и позициями.

Открыть инструмент — Генератор CSS-градиентов

Конвертер цветов

Преобразуйте поддерживаемые значения sRGB HEX, RGB и HSL с альфа-каналом и указанной точностью.

Открыть инструмент — Конвертер цветов

Изображение в текст (OCR)

Распознавайте печатный текст на локальных PNG и JPEG, выбирайте язык и проверяйте результат перед копированием или скачиванием.

Открыть инструмент — Изображение в текст (OCR)

Чтение QR-кода из изображения

Прочитайте один QR-код из локального PNG или JPEG и проверьте текст или байты, не открывая ссылки.

Открыть инструмент — Чтение QR-кода из изображения

Проверка контрастности цветов

Сравните цвета переднего плана и фона, настройте непрозрачность и проверьте числовые пороги контрастности WCAG для текста и важных деталей интерфейса.

Открыть инструмент — Проверка контрастности цветов

Калькулятор размера печати и разрешения

Рассчитайте размер отпечатка, нужное число пикселей и фактическое PPI с полями или обрезкой.

Открыть инструмент — Калькулятор размера печати и разрешения

Калькулятор соотношения сторон

Найдите соотношение ширины и высоты или рассчитайте новый размер в пикселях по одной заданной стороне.

Открыть инструмент — Калькулятор соотношения сторон

Сжатие изображений

Попробуйте уложить JPEG, PNG или WebP в заданный размер файла: проверьте результат и при желании уменьшите размеры изображения.

Открыть инструмент — Сжатие изображений

HEIC в JPG

Преобразуйте поддерживаемые HEIC-фото в полноразмерные JPG в браузере. Настройте качество и фон, скачайте проверенные файлы по отдельности или в ZIP.

Открыть инструмент — HEIC в JPG

Конвертер изображений

Конвертируйте поддерживаемые PNG, JPEG и WebP локально, настройте прозрачность, фон и качество и скачайте проверенные результаты.

Открыть инструмент — Конвертер изображений

Создать фотоколлаж

Расположите фотографии в сетке и скачайте PNG или JPEG.

Открыть инструмент — Создать фотоколлаж

Поворот и отражение изображений

Поверните или отразите набор локальных статичных PNG, JPEG и WebP, затем проверьте и скачайте обработанные изображения.

Открыть инструмент — Поворот и отражение изображений

Обрезать изображение

Обрежьте локальный JPEG, PNG или WebP с точностью до пикселя и скачайте результат в PNG или JPEG.

Открыть инструмент — Обрезать изображение

Изменить размер изображения

Измените размер JPG, PNG или WebP в пикселях или процентах, проверьте результат и скачайте его.

Открыть инструмент — Изменить размер изображения

Все инструменты этой категории