Стили css для кнопок: Buttons Основные стили кнопок CSS уроки для начинающих академия

Leave a Comment / Css / By /

:active — CSS | MDN

In this article

  • Синтаксис
  • Пример
  • Спецификации
  • Совместимость с браузерами
  • Смотрите также

Псевдокласс :active соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью — это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.

/*  Любой элемент <a>, который будет активирован */
a:active {
  color: red;
}

Также псевдокласс :active срабатывает при использовании клавиши TAB на клавиатуре. Обычно это используется для HTML-элементов <a> и <button>, но может применяться и к другим элементам.

Это свойство может быть переопределено любыми другими псевдоклассами, относящимся к ссылке, такими как :link, :hover и :visited, описанными в последующих правилах.

Чтобы стилизировать нужные ссылки, вам нужно ставить правило :active после всех других правил, относящихся к ссылке, как определено правилом LVHA-порядком: :link — :visited — :hover — :active.

Примечание: В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс :active должен применяться только к первой кнопке; для праворуких мышей — это обычно самая левая кнопка.

Error: could not find syntax for this item

Активные ссылки

HTML
<p>Этот абзац содержит ссылку:
<a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.</a>
У абзаца фон станет серым при нажатии на него или на ссылку. </p>
CSS
a:link { color: blue; }          /* Непосещённые ссылки */
a:visited { color: purple; }     /* Посещённые ссылки */
a:hover { background: yellow; }  /* Ссылки при наведении */
a:active { color: red; }         /* Активные ссылки */
p:active { background: #eee; }   /* Активные абзацы */
Результат

Активные элементы формы

HTML
<form>
  <label for="my-button">Моя кнопка: </label>
  <button type="button">Попробуй Нажать Меня или Мою подсказку!</button>
</form>
CSS
form :active {
  color: red;
}
form button {
  background: white;
}
Result

СпецификацияСтатусКомментарий
HTML Living Standard
Определение ‘:active’ в этой спецификации. 		Живой стандарт
Selectors Level 4
Определение ‘:active’ в этой спецификации.		Рабочий черновикБез изменений
Selectors Level 3
Определение ‘:active’ в этой спецификации.
РекомендацияБез изменений
CSS Level 2 (Revision 1)
Определение ‘:active’ в этой спецификации.		РекомендацияБез изменений
CSS Level 1
Определение ‘:active’ в этой спецификации.		РекомендацияПервоначальное определение

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.
  • Псевдоклассы, связанные с ссылками: :link, :visited и :hover.

Last modified: , by MDN contributors

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

itProger