Как сделать красивую кнопку
Короткий ответ
Уберите стандартную рамку, задайте фон, отступы и скругление:
<style>
.btn { padding: 10px 20px; border: 0; border-radius: 8px; background: rebeccapurple; color: white; font-size: 16px; cursor: pointer; }
</style>
<button class="btn">Buy</button>Реакция на наведение и нажатие
Псевдокласс :hover меняет цвет, :active слегка «вдавливает» кнопку, а transition делает смену плавной:
<style>
.btn { padding: 10px 20px; border: 0; border-radius: 8px; background: rebeccapurple; color: white; cursor: pointer; transition: background 0.2s, transform 0.1s; }
.btn:hover { background: indigo; }
.btn:active { transform: scale(0.96); }
</style>
<button class="btn">Click me</button>Кнопка-капсула и контурная кнопка
Большое скругление вроде 999px превращает кнопку в капсулу. Второстепенную кнопку делают контурной — прозрачный фон и рамка:
<style>
.btn { padding: 10px 20px; border: 2px solid rebeccapurple; border-radius: 999px; cursor: pointer; }
.primary { background: rebeccapurple; color: white; }
.ghost { background: transparent; color: rebeccapurple; }
</style>
<button class="btn primary">Save</button>
<button class="btn ghost">Cancel</button>Частая ошибка
Кнопке убирают обводку фокуса outline: none ради красоты. Человек, который пользуется клавиатурой, перестаёт видеть, где он находится. Если стандартная обводка не нравится, замените её своей через :focus-visible, а не удаляйте.
Функции из этого ответа
- <button> — Кнопка: отправляет форму или запускает действие.
- border-radius — Скругляет углы элемента.
- padding — Внутренний отступ между содержимым и рамкой элемента.
- :hover — Срабатывает, пока над элементом находится указатель мыши.
- :active — Срабатывает, пока элемент нажимают, — между нажатием и отпусканием кнопки мыши.