Как изменить цвет кнопки при нажатии css

Как изменить цвет кнопки при нажатии css

Для изменения цвета кнопки при нажатии можно использовать псевдокласс :active в CSS. Вот подробная инструкция по изменению цвета кнопки при нажатии.

1. Добавьте класс или id к вашей кнопке в HTML. Например, ``.

2. Определите стили для вашей кнопки в CSS. Например:

«`
.my-button {
background-color: #ccc;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
«`

3. Добавьте стили для изменения цвета кнопки при нажатии. Используйте псевдокласс :active. Например:

«`
.my-button:active {
background-color: #ff0000;
}
«`

В данном примере, при нажатии на кнопку, ее фоновый цвет будет изменяться на красный (#ff0000).

4. Сохраните файл CSS и обновите вашу веб-страницу. При нажатии на кнопку, ее цвет должен измениться на указанный вами в псевдоклассе :active цвет.

Советы:
— Убедитесь, что вы выбираете подходящий цвет для изменения кнопки при нажатии. Используйте цвета, которые хорошо видны на фоне кнопки.
— Вы можете менять другие свойства кнопки, такие как цвет текста, границы или размер, при нажатии, добавляя их в стили псевдокласса :active.
— Проверьте, что ваш код работает в разных браузерах. Возможно, вам потребуется добавить префиксы для псевдокласса :active в vendor-specific версиях CSS для поддержки разных браузеров.