:active

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

Сделаем объёмную кнопку, у которой будет меняться цвет фона и текста в активной фазе.

        
          
          button {  padding: 2.5rem;  border: 0;  border-radius: 2.5rem;  font-size: 2.5rem;  background-color: #bada55;  cursor: pointer;  transition: background 0.3s, color 0.3s;}button:active {  color: white;  background-color: purple;}
          button {
  padding: 2.5rem;
  border: 0;
  border-radius: 2.5rem;
  font-size: 2.5rem;
  background-color: #bada55;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

button:active {
  color: white;
  background-color: purple;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

К любому селектору добавляем двоеточие и ключевое слово active.

        
          
          a:active {  /* Стили */}
          a:active {
  /* Стили */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .link:active {  /* Стили */}
          .link:active {
  /* Стили */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          li .link:active {  /* Стили */}
          li .link:active {
  /* Стили */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          #id:active {  /* Стили */}
          #id:active {
  /* Стили */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .link::before:active {  /* Стили */}
          .link::before:active {
  /* Стили */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В момент нажатия на элемент при помощи кнопки мыши или клавиши клавиатуры этому самому элементу присваивается виртуальный класс :active, который можно стилизовать. За присвоение этого класса отвечает движок браузера, нам о самом процессе присвоения думать не нужно.

💡 Смену стилей между состояниями можно анимировать при помощи transition 🎉

💡 Часто, если дизайнер не позаботился об отрисовке состояния :active для кнопок, можно задать стили сразу и для наведения курсора и для активного состояния:

        
          
          button:hover,button:active {  /* Стили */}
          button:hover,
button:active {
  /* Стили */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

На практике

Скопировать ссылку "На практике" Скопировано

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

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Дизайнеры и верстальщики почему-то часто забывают про тот короткий промежуток времени, когда пользователь нажал кнопку мыши, но ещё её не отпустил. И не стилизуют состояние :active. Но «дьявол кроется в деталях», и если в вашем интерфейсе будут продуманы даже такие небольшие элементы, то он будет создавать ощущение опрятности и заботы о пользователе.

🛠 Если вы задаёте стили для разных состояний ссылок, то следует придерживаться определённого порядка в объявлении стилей: :link — :visited — :focus — :hover — :active.

Этот порядок легко запомнить в виде аббревиатуры LVFHA и мнемоники LoVe Fears HAte.

+ Развернуть