Вот простой пример CSS для создания кнопки, которая меняет свой стиль при нажатии.
Этот код создает кнопку, которая изменяет цвет фона при наведении и нажатии. Кнопка имеет класс .button
, который применяет стили, и использует псевдоклассы :hover
и :active
для изменения стиля кнопки при наведении и нажатии соответственно.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Нажимающаяся кнопка</title>
<style>
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-align: center;
text-decoration: none;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
.button:active {
background-color: #003d80;
}
</style>
</head><body><button class="button">Нажми меня</button></body></html>
Пример работы.