Как сделать кнопки вместо radio переключателя css?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div class="radio-buttons">
  <input type="button" name="option" id="option1" class="radio-button">
  <label for="option1">Опция 1</label>
  
  <input type="button" name="option" id="option2" class="radio-button">
  <label for="option2">Опция 2</label>
  
  <input type="button" name="option" id="option3" class="radio-button">
  <label for="option3">Опция 3</label>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

.radio-buttons {
  display: flex;
  flex-direction: row;
}

.radio-button {
  display: none;
}

.radio-button:checked + label {
  background-color: blue;
  color: white;
}

.label:hover {
  cursor: pointer;
}