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

Настройте кнопку (цвета, скругление углов, тень, текст) и смотрите результат в реальном времени, прежде чем скопировать полный CSS-код, готовый для вставки в проект. Генерация выполняется на 100% локально в вашем браузере.

Текст кнопки

Цвет фона

Цвет текста

Радиус углов: 8px

Размер текста: 16px

Вертикальный padding: 12px

Горизонтальный padding: 24px

Тень Жирный текст

CSS-код

.btn {
  background: #3b82f6;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover {
  background: #2269dd;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

Как это работает

Хорошо продуманная кнопка должна сразу распознаваться как кликабельная: у неё достаточный контраст между текстом и фоном и эффект при наведении, подтверждающий интерактивность. Настраивайте каждый параметр (цвета, радиус углов, тень, размер) и наблюдайте результат в реальном времени в предпросмотре, а затем скопируйте полный CSS-код — в него автоматически включено состояние :hover с затемнённым оттенком и лёгким эффектом приподнятия.

Как вычисляется цвет при наведении?

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

Совместим ли созданный CSS со всеми фреймворками?

Да, это стандартный CSS без привязки к какому-либо фреймворку: его можно вставить в обычную таблицу стилей, превратить в утилитарный класс или вручную перевести в стиль Tailwind либо styled-components, если вы их используете.

Внешний вид и код создаются в реальном времени в вашем браузере, без каких-либо запросов к серверу.