CSS. Измененить цвет при нажатии и сохранить изменённое значение

#javascript #html #css

/* Элемент меняет цвет при наведении на него */
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 не добавляется ; ?
    

Ответы

Ответ 1

Решение на чистом 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.


Ответ 2

Вариант на `JavaScript`

Добавлять класс со стилем при клике на кнопку:



var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  this.classList.add("active");
});
button {
  color: white;
  background-color: black;
  border: none;
  outline: none;
  padding: 1.2rem 2rem;
  cursor: pointer;
  user-select: none;
}

.active {
  background-color: red;
}





Вариант на чистом `HTML/CSS`

Завязаться на значение :checked у :



input[type=radio] {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: -1;
}

label {
  cursor: pointer;
  user-select: none;
}

label {
  color: white;
  display: inline-block;
  background: black;
  margin: 0 0 .5em 0;
  padding: 1em 2em;
}

input[type=radio]:checked~label {
  background-color: red;
}

Click