Загрузка...

Кнопки в CSS

Кнопки — это элементы «сделай это» — отправить, сохранить, дальше. CSS может дать им ясный вид и честную обратную связь при наведении, нажатии, фокусе или отключении. Держите HTML семантичным (button или submit); этот урок про внешний вид и состояния.

Набор для кнопок

📊 Кнопки одним взглядом

Часть Повседневная роль
padding + background + border Собрать плотную, читаемую поверхность кнопки
border-radius Смягчить углы (или сделать «таблетку» большим радиусом)
:hover / :active Показать «я интерактивна» и «меня нажали»
:focus-visible Держать видимым кольцо фокуса клавиатуры
:disabled + cursor Приглушить недоступные кнопки; курсор-рука когда можно кликнуть

Стилизуйте общий .btn (или button), чтобы основные действия на странице выглядели из одной семьи. Padding текстовых полей был в прошлом уроке — здесь одеваем цели клика.

Плотная основная кнопка

Начните с удобного padding, ясного фона, читаемого цвета текста и спокойного border-radius. Предпочтите font: inherit, чтобы кнопка совпадала с соседним текстом.

Базовая основная кнопка

css
CSS Code 
button,
.btn {
display: inline-block;
padding: 0.65rem 1.1rem;
font: inherit;
font-weight: 600;
color: #fff;
background: #0b5fff;
border: 1px solid #0b5fff;
border-radius: 0.5rem;
cursor: pointer;
}

Hover и active — честная обратная связь

:hover может чуть затемнить или осветлить поверхность. :active должен ощущаться как нажатие — оттенок темнее или крошечный сдвиг — не совсем новая неоновая тема.

Hover и active

css
CSS Code 
button:hover,
.btn:hover {
background: #094fd6;
border-color: #094fd6;
}

button:active,
.btn:active {
background: #0844b8;
border-color: #0844b8;
}

Фокус, который видно

Никогда не убирайте стили фокуса без замены. :focus-visible рисует ясное кольцо для клавиатуры и держит клики мыши спокойными.

Видимое кольцо фокуса

css
CSS Code 
button:focus-visible,
.btn:focus-visible {
outline: 2px solid #0b5fff;
outline-offset: 3px;
}

Отключённые кнопки остаются видимыми

Кнопка disabled должна выглядеть недоступной — меньшая непрозрачность или приглушённые цвета — и отвергать курсор-руку. Не прячьте её из макета.

Тон disabled

css
CSS Code 
button:disabled,
.btn:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #8aa9e8;
border-color: #8aa9e8;
}

Спокойная привычка для кнопок

Держите одну основную оболочку, ясный hover/active, видимое кольцо фокуса и приглушённый disabled. Варианты outline/ghost могут делить тот же padding и радиус, чтобы набор выглядел родственным.

Компаньон outline

css
CSS Code 
.btn-outline {
color: #0b5fff;
background: transparent;
border: 1px solid #0b5fff;
}

.btn-outline:hover {
color: #fff;
background: #0b5fff;
}

Попробуйте сами

  1. Стилизуйте основную button с padding, фоном, цветом текста и border-radius.
  2. Затемните :hover и чуть углубите :active.
  3. Добавьте outline :focus-visible — без голого outline: none.
  4. Приглушите :disabled и поставьте cursor: not-allowed.
  5. По желанию: добавьте .btn-outline с тем же padding и радиусом.

Частые ошибки

  • outline: none без замены фокуса (пользователи клавиатуры теряются)
  • Крошечный padding, который промахивается мимо тач-целей на телефоне
  • Превращать этот урок в стили input/textarea (это были элементы форм)
  • Дикий неон на :hover, ломающий спокойствие бренда
  • Стилизовать только a и забывать настоящие button

Кратко

  • Padding, фон, граница и радиус собирают плотную поверхность кнопки
  • :hover и :active дают честную обратную связь взаимодействия
  • Держите видимое кольцо :focus-visible
  • Приглушайте :disabled; используйте cursor: pointer, когда можно кликнуть
  • Хром полей оставьте уроку элементов форм; здесь одеваем цели клика

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 34 из 35
Css Урок