Как изменить вид нажатой кнопки?

Чтобы пользователь понимал, что его щелчок по кнопке сработал, в момент щелчка меняют вид самой кнопки. Для этого используется псевдокласс :active, который добавляется к селектору button. Стилевые правила для этого селектора определяют вид нажатой кнопки (пример 1).

Пример 1. Использование :active

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Кнопка</title>
  <style>
   button {
    border: 2px solid #e34761; /* Параметры рамки */
    background: #f3dbdf; /* Цвет фона */
    padding: 0.5em 1.5em; /* Поля вокруг текста */
   }
   button:active {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
   }
  </style>
 </head> 
 <body> 
  <button>Кнопка</button>
  <button>Кнопка</button>
 </body>
</html>

Результат данного примера показан на рис. 1. Для селектора button:active используется свойство box-shadow со значением inset, оно создаёт внутреннюю полупрозрачную тень, за счёт чего кнопка кажется вдавленной.