Щоб користувач розумів, що його клацання по кнопці спрацювало, в момент клацання змінюють вигляд самої кнопки. Для цього використовується псевдоклас :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, воно створює внутрішню напівпрозору тінь, за рахунок чого кнопка здається вдавленою.
Мал. 1. Вигляд кнопки при натисканні