CSS: как сохранить стили после снятия фокуса

Question

У нас есть несколько кнопок со стилем, следующим образом CSS:

.btn-outline-primary {
  color: blue;
  border: 1px solid blue;
  background: transparent;
  transition: all 0.3s ease 0s;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
      background: blue;
      border: 1px solid blue;
      color: white;
    }

Однако, если нажать кнопку, а затем в любом месте страницы происходит щелчок, стиль исчезает, как и ожидалось. Есть ли способ сохранить стиль, пока не будет нажата другая кнопка?

Answer 1

Это можно сделать без JS:

input[name='btn-focus'] {
  display: none
}

.btn {
  display: inline-block;
  margin: 1em;
  padding: .5em 1em;
  color: blue;
  border: 1px solid;
  border-radius: .5em;
  background: transparent;
  transition: all 0.3s ease 0s;
}

.btn:hover,
:checked+.btn {
  background: blue;
  color: white;
}

<input type="radio" name="btn-focus" id="btn-focus1">
<label for="btn-focus1" class="btn">Button 1</label>
<input type="radio" name="btn-focus" id="btn-focus2">
<label for="btn-focus2" class="btn">Button 2</label>

Answer 2

Похоже, что Javascript может потребоваться для добавления или удаления CSS классов, когда пользователи нажимают на кнопку.