Как сделать кнопку в CSS с доступными состояниями

Чтобы понять, как сделать кнопку в css, начните с элемента <button> и класса. Затем задайте цвет, сбросьте нативные стили и оформите состояния :hover, :active, :focus-visible и :disabled. В статье вы соберете готовый шаблон и сравните черно-белый стиль, Flat UI и Material Design.

Основы CSS кнопок

Кнопка запускает действие на текущей странице: отправляет форму, открывает окно или меняет состояние интерфейса. Для перехода на другой адрес используйте ссылку <a>, а для действия – <button>.

Корректная разметка начинается с элемента <button>. Атрибут type="button" не дает кнопке случайно отправить форму.

<button type="button" class="site-button">Отправить заявку</button>

Класс site-button связывает HTML с CSS и изолирует оформление кнопки.

.site-button {
  color: #fff;
  background-color: #1769e0;
  border: 2px solid #1769e0;
  border-radius: 6px;
  padding: 10px 18px;
  font: inherit;
  cursor: pointer;
}

Псевдокласс :hover отвечает за наведение указателя, а :active работает во время нажатия.

Цвет кнопки в CSS

Фраза «как изменить цвет кнопки в html» описывает задачу CSS. Свойство color меняет текст, background-color задает фон, а border-color меняет рамку.

.site-button {
  color: #fff;
  background-color: #1769e0;
  border-color: #1769e0;
}

.site-button:not(:disabled):hover {
  color: #1769e0;
  background-color: #fff;
  border-color: #1769e0;
}

CSS-переменные хранят палитру в одном месте и упрощают смену темы.

:root {
  --button-bg: #1769e0;
  --button-text: #fff;
  --button-border: #1769e0;
}

.site-button {
  color: var(--button-text);
  background-color: var(--button-bg);
  border-color: var(--button-border);
}

Для подбора сочетаний откройте Colorhexa. Палитры брендов собраны в BrandColors. Контраст текста и фона проверяйте по требованиям WCAG.

Тени и глубина

Свойство box-shadow добавляет тень вокруг кнопки. Значения идут в порядке: горизонтальное смещение, вертикальное смещение, размытие и цвет.

.site-button {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.site-button:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transform: translateY(2px);
}

Значение 0 2px смещает тень только вниз. Первое значение -2px добавит смещение влево.

Плавный переход состояний

Сокращенная запись transition связывает свойства с длительностью анимации. Для кнопки достаточно менять фон, текст, рамку и тень.

.site-button {
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

.site-button:not(:disabled):hover {
  color: #1769e0;
  background-color: #fff;
  border-color: #1769e0;
}

@media (prefers-reduced-motion: reduce) {
  .site-button {
    transition: none;
  }
}

Медиазапрос prefers-reduced-motion отключает движение для пользователя, который выбрал уменьшение анимации в настройках системы.

Сброс стилей кнопки

Браузер добавляет кнопке собственные шрифт, фон, рамку и отступы. Сбросьте эти значения на классе, а затем задайте оформление компонента.

button.site-button {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  padding: 0;
  color: inherit;
}

button.site-button {
  color: #fff;
  background-color: #1769e0;
  border: 2px solid #1769e0;
  border-radius: 6px;
  padding: 10px 18px;
}

Свойство appearance: none убирает часть нативного оформления. После сброса задайте фон, рамку, цвет текста и отступы вручную.

Hover, active, focus-visible и disabled

Эти состояния показывают разные этапы взаимодействия. Наведение дает обратную связь указателю, нажатие показывает действие, фокус помогает клавиатурной навигации, а disabled обозначает недоступную операцию.

Фокус и доступность

Добавьте заметный контур для клавиатурного фокуса.

.site-button:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

Правило outline: none без равноценной замены скрывает положение элемента при переходе клавишей Tab. Проверьте контраст текста и фона по WCAG.

Надпись должна коротко описывать действие: «Сохранить», «Открыть корзину» или «Отправить». Для перехода на другую страницу используйте <a> с понятным адресом, для действия внутри интерфейса – <button>.

Состояние disabled

Запрос «button disabled css» сводится к стилизации кнопки с атрибутом disabled. Атрибут выключает нативную кнопку и исключает ее из клавиатурной навигации.

<button type="button" class="site-button" disabled>Отправка недоступна</button>

.site-button:disabled,
.site-button[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

.site-button:not(:disabled):hover {
  color: #1769e0;
  background-color: #fff;
  border-color: #1769e0;
}

Селектор :not(:disabled) не запускает hover-эффект у выключенной кнопки. Не заменяйте disabled одним aria-disabled="true": ARIA сообщает состояние вспомогательным технологиям, но не блокирует нажатие. Для такого элемента отдельно отключите действие в JavaScript.

Три стиля кнопок

Выбирайте стиль по роли кнопки и характеру интерфейса. Минималистичный вариант проще поддерживать, Flat UI усиливает ощущение нажатия, а Material Design использует тени и короткие движения.

Простой черный и белый

Черно-белая кнопка строится на контрасте и требует минимума правил. Она подходит для страницы, где внимание должно оставаться на тексте.

.suit-and-tie {
  color: #fff;
  background-color: #000;
  border: 2px solid #fff;
  border-radius: 20px;
  padding: 4px 30px;
  font: inherit;
  transition: background-color .2s, color .2s;
}

.suit-and-tie:hover {
  color: #000;
  background-color: #fff;
}

Для другой палитры замените значения цвета и сохраните читаемый контраст.

Кнопки Flat UI

Flat UI использует плоскую заливку и заметную нижнюю грань. При нажатии грань становится тоньше, а кнопка смещается вниз.

.turquoise {
  background: #1abc9c;
  border: 1px solid #16a085;
  border-bottom-width: 3px;
  border-radius: 6px;
  color: #fff;
  padding: 10px;
  font: inherit;
  cursor: pointer;
}

.turquoise:hover {
  opacity: .8;
}

.turquoise:active {
  background: #18b495;
  border-bottom-width: 1px;
  transform: translateY(2px);
}

В состоянии :active меняются только свойства, которые создают ощущение нажатия. Ширина, радиус, отступы и цвет текста остаются в основном правиле.

Material Design

Material Design использует ясную иерархию, контрастные поверхности, тени и короткую реакцию на действие. Такой подход помогает показать связь между нажатием и изменением состояния.

Свойство font: inherit сохраняет шрифт страницы и не требует отдельного подключения Roboto. Простую ripple-волну можно создать чистым CSS без отдельного компонента.

<button type="button" class="material-button">
  <span>Отправить</span>
</button>

.material-button {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  padding: 10px 18px;
  color: #fff;
  background: #1976d2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
  font: inherit;
  cursor: pointer;
  transition: box-shadow .2s, background-color .2s;
}

.material-button::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .25s;
}

.material-button:active {
  box-shadow: 0 8px 17px rgba(0, 0, 0, .2);
}

.material-button:active::after {
  transform: translate(-50%, -50%) scale(18);
}

Значение 0 2px 5px создает тень снизу, без смещения влево. При нажатии вертикальный вылет тени увеличивается, поэтому поверхность кажется поднятой над страницей.

Готовый шаблон кнопки

Соедините разметку, сброс, цвет и состояния в одном компоненте. Шаблон подходит для обычной кнопки действия.

<button type="button" class="action-button">Сохранить</button>

.action-button {
  appearance: none;
  color: #fff;
  background-color: #1769e0;
  border: 2px solid #1769e0;
  border-radius: 6px;
  padding: 10px 18px;
  font: inherit;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

.action-button:not(:disabled):hover {
  color: #1769e0;
  background-color: #fff;
  border-color: #1769e0;
}

.action-button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2);
}

.action-button:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

.action-button:disabled,
.action-button[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .action-button {
    transition: none;
  }
}

Наведите курсор, нажмите кнопку мышью и перейдите к ней клавишей Tab. Для проверки disabled добавьте атрибут в HTML: кнопка сохранит спокойный вид при наведении.

Начните с базового шаблона. Добавляйте тень или ripple только тогда, когда эффект помогает понять реакцию интерфейса.