Генератор CSS-кнопок онлайн — визуальная настройка и готовый код
Визуальная настройка цвета, тени, скруглений и hover-эффектов. Готовый CSS + HTML код.
Превью
Размер и текст
16px
14px
28px
Цвет и фон
8px
Тень
0px
4px
15px
30%
Hover-эффект
8px
Пресеты
Код
.my-button { background: #667eea; color: #ffffff; border: none; padding: 14px 28px; font-size: 16px; border-radius: 8px; box-shadow: 0px 4px 15px rgba(102, 126, 234, 0.30); cursor: pointer; font-weight: 600; transition: all 0.3s; } .my-button:hover { background: #5a6fd6; transform: translateY(-2px); box-shadow: 0px 12px 23px rgba(102, 126, 234, 0.30); }<button class="my-button">Нажми меня</button>Зачем нужен генератор CSS-кнопок?
Кнопки — главный элемент взаимодействия на сайте. Генератор позволяет визуально настроить все параметры: цвет, размер, тень, скругления и эффект при наведении.
- Визуальное превью кнопки в реальном времени
- Настройка обычного состояния и hover-эффекта
- Готовые пресеты для быстрого старта
- Копирование CSS и HTML кода в один клик