CSS псевдокласс :active

Псевдокласс :active применяет заданный стиль к активному элементу (элемент становится активным при нажатии на него).

/* Изменяем цвет текста у активной кнопки */
button:active { color: grey; }

Стиль будет применяться к элементу только во время нажатия.

Примечание: стили псевдокласса :active будут переопределены любым следующим за ним в CSS-коде псевдоклассом, связанным со ссылками (:link, :hover, :visited). Поэтому псевдокласс :active необходимо разместить после остальных псевдоклассов, в соответствии с порядком LVHA:

:link {...}
:visited {...}
:hover {...}
:active {...}

Пример

input:active {
  outline: none; 
  background: #ebfaeb; 
  color: #248f24
}

button {
  width: 120px; 
  padding: 5px; 
  font-size: 1.3em;
  background: #b366ff;
  color: white;  
  border: 2px solid white; 
}
button:active { outline: 3px solid #b366ff; }

a {
  color: #0099e6;
  background-color: #e6f7ff;
  font-weight: bold;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
}
a:active { 
  color: #e6f7ff;
  background-color: #0099e6; 
}

<p><input value="Поле для ввода текста" /></p>

<p><button>Кнопка!</button></p>

<p><a href="#">ссылка</a></p>

Результат

ссылка