/* Элемент меняет цвет при наведении на него */
button.yt-icon-button:hover {
vertical-align: middle;
color: #ff0087;
}
/* Элемент меняет цвет во время нажатия на доли секунд. */
button.yt-icon-button:active {
vertical-align: middle;
color: #01a715;
/* Элемент меняет цвет после нажатия, но стоит потом куда-то кликнуть и изменённый цвет заменяется на цвет по умолчанию. */
button.yt-icon-button:focus {
vertical-align: middle;
color: #01a715;
}
Как сделать так, чтобы при клике изменялся цвет элемента и не изменялся на дефолт при клике на другое место.
Попробовала добавить код от Vadizar.
Получается вот так:
Но когда я добавляю нижнее, так как мне не нужно изменение фона. Я с фоном не работаю :
button {
color: #ff9000 !important;
transition: color 9999999s
}
button:active {
color: green;
transition: color 0s
}
у меня "палец вверх" не становится зелёным. Почему ?
И ещё:
Почему подсветка кода от Vadizar такая:
слово background выделяется зелёным
А при моём (скорей всего неправильном) варианте такая:
слово color не выделяется зелёным
И почему в конец после transition не добавляется ?
Ответ
Решение на чистом CSS без хаков с input:
button {
color: #fff;
background: #000;
padding: 1.2rem 2rem;
cursor: pointer;
user-select: none;
border: none;
outline: none;
transition: background 9999999s;
}
button:active {
background: red;
transition: background 0s;
}
Я не настаиваю на том, что это верный подход, и полностью согласен с решением St1myL. Тем не менее, данный пример показывает, на что способен CSS при извращенном воображении и может быть полезен в некоторых случаях, когда невозможно использовать JS и не подходит метод с input
Комментариев нет:
Отправить комментарий