Разное

Css оформление кнопок: Оформление кнопок CSS — скругленные кнопки, Yahoo, Google, Facebook

15.06.1992

:disabled, :enabled — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
  4. Как понять
  5. Подсказки
  6. На практике
    1. Алёна Батицкая советует

Кратко

Секция статьи «Кратко»

Псевдоклассы :disabled и :enabled помогают стилизовать интерактивные элементы — на которые можно и нельзя нажать.

Легко применяются к любым элементам, которым можно задать атрибут disabled: <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> и <input>.

Пример

Секция статьи «Пример»

Часто требуется, чтобы на кнопку отправки формы нельзя было нажать, пока не заполнены все поля этой формы. Проще всего заблокировать кнопку атрибутом disabled. Но недостаточно просто указать его в HTML, нужно ещё и при помощи оформления показать пользователю, что кнопка не активна. Как раз для этого нам пригодится псевдокласс :disabled.

Кнопка будет полупрозрачной:

button:disabled {    opacity: 0.5;}
          button:disabled {
    opacity: 0.5;
}

Псевдокласс :enabled, наоборот, поможет стилизовать все доступные для взаимодействия элементы. По факту его чаще всего не указывают, потому что записи с ним и без него, как правило, равноценны: .input = .input:enabled.

Как пишется

Секция статьи «Как пишется»

Любому селектору, указывающему на интерактивный элемент, дописываем двоеточие и указываем одно из ключевых слов: enabled или disabled.

Как понять

Секция статьи «Как понять»

Браузер ориентируется на атрибут disabled и, в зависимости от его наличия или отсутствия, добавляет элементу состояние enabled — доступен, или disabled — недоступен.

Подсказки

Секция статьи «Подсказки»

💡 Даже если дизайнер забыл про неактивное состояние, обязательно прописывайте его в стилях, чуть приглушая фоновый цвет или делая элемент полупрозрачным — чтобы пользователь точно знал, что с этим элементом взаимодействовать нельзя.

💡 enabled чаще всего не используется, потому что все интерактивные элементы по умолчанию доступны (включены). Это значит, что прописав стили для селектора .input, вы закрываете сценарий с активным элементом.

На практике

Секция статьи «На практике»

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

🛠 «Выключать» взаимодействие с кнопками или другими элементами формы удобнее именно атрибутом

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

Код для кнопки из моего последнего проекта:

Стили для активной кнопки в обычном состоянии:

.additional-btn {  padding: 2rem 3rem;  border: 1px solid currentColor;  font-family: inherit;  font-size: 1.6rem;  color: #FF6650;  text-decoration: none;  background-color: transparent;  transition: border 0. 3s, color 0.3s;  cursor: pointer;  user-select: none;}
          
 
.additional-btn {
  padding: 2rem 3rem;
  border: 1px solid currentColor;
  font-family: inherit;
  font-size: 1.6rem;
  color: #FF6650;
  text-decoration: none;
  background-color: transparent;
  transition: border 0.3s, color 0.3s;
  cursor: pointer;
  user-select: none;
}

Стили для кнопки при наведении курсора или клике:

.additional-btn:active,.additional-btn:hover {  color: #FF5050;  transition: none;}
          .additional-btn:active,
.additional-btn:hover {
  color: #FF5050;
  transition: none;
}

Стили для кнопки, когда она неактивна:

.additional-btn:disabled {  cursor: default;  color: #A44234;}
          .additional-btn:disabled {
  cursor: default;
  color: #A44234;
}
Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

:checked

alt + ←

→

:in-range, :out-of-range

alt + →

#6 — Кнопки и группы кнопок

itProger