CSS cкрипт нажимающейся кнопки

Вот простой пример 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>

Пример работы.

Нажимающаяся кнопка

Добавить комментарий