Генератор CSS-кнопок
Создавайте кнопки и копируйте чистый CSS.
Задайте текст, цвета, скругление, отступы и размер шрифта кнопки, посмотрите её вживую и скопируйте готовый CSS с эффектом наведения.
Фон
Цвет текста
Цвет наведения
12px
24px
12px
16px
.my-button {
background: #7c3aed;
color: #ffffff;
border: none;
border-radius: 12px;
padding: 12px 24px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease;
}
.my-button:hover {
background: #6d28d9;
}Как сгенерировать CSS кнопки
- Введите нужный текст кнопки.
- Выберите цвета фона, текста и наведения.
- Настройте скругление, отступы и размер шрифта ползунками.
- Скопируйте CSS и добавьте правило наведения в таблицу стилей.
Часто задаваемые вопросы
Входит ли эффект наведения в CSS?
Да. Вместе с базовым стилем генерируется правило :hover с выбранным цветом.
Можно ли изменить шрифт или насыщенность?
Результат задаёт font-weight 700. После вставки свободно меняйте font-family и другие свойства.
Что-нибудь загружается?
Нет. Генератор полностью клиентский и ничего не хранит.