Урок 15 · CSS

Обычная кнопка, главная и неактивная

Кнопка должна быть похожа на действие. Ссылка, которая ведёт на другую страницу, остаётся ссылкой, даже если выглядит как кнопка.

Почему это следующий шаг

Единицы выбраны. Первое, что человек нажимает на странице, — кнопка или ссылка-действие.

Как сделать

Задай padding, радиус, цвет фона и цвет текста с нормальным контрастом. Состояние :focus-visible показывает обводку с клавиатуры. :disabled делает кнопку серой и с cursor: not-allowed. Не убирай обводку фокуса без замены. Не делай кликабельным голый div.

.button {
  display: inline-block;
  padding: 0.7rem 1rem;
  background: #2f5d50;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}
.button:focus-visible { outline: 3px solid #e0a100; outline-offset: 2px; }

Что проверить

• Текст кнопки читается на фоне.
• С клавиатуры видно, где фокус.
• Неактивная кнопка не притворяется рабочей.