1 
 2<div class="radio-input">
 3  <label>
 4    <input value="value-1" name="value-radio" id="value-1" type="radio" />
 5    <span>Option 1</span>
 6  </label>
 7  <label>
 8    <input value="value-2" name="value-radio" id="value-2" type="radio" />
 9    <span>Option 2</span>
10  </label>
11  <label>
12    <input value="value-3" name="value-radio" id="value-3" type="radio" />
13    <span>Option 3</span>
14  </label>
15  <span class="selection"></span>
16</div>          

 1 
 2.radio-input input {
 3  display: none;
 4}
 5 
 6.radio-input {
 7  --container_width: 250px;
 8  position: relative;
 9  display: flex;
10  align-items: center;
11  border-radius: 10px;
12  background-color: #212121;
13  color: #fff;
14  width: var(--container_width);
15  overflow: hidden;
16  border: 2px solid #fff;
17}
18 
19.radio-input label {
20  width: 100%;
21  padding: 10px;
22  cursor: pointer;
23  display: flex;
24  justify-content: center;
25  align-items: center;
26  z-index: 1;
27  font-weight: 600;
28  letter-spacing: -1px;
29  font-size: 14px;
30}
31 
32.selection {
33  display: none;
34  position: absolute;
35  height: 100%;
36  width: calc(var(--container_width) / 3);
37  z-index: 0;
38  left: 0;
39  top: 0;
40  transition: 0.15s ease;
41}
42 
43.radio-input label:has(input:checked) {
44  color: #000;
45}
46 
47.radio-input label:has(input:checked) ~ .selection {
48  background-color: #ffe500;
49  display: inline-block;
50}
51 
52.radio-input label:nth-child(1):has(input:checked) ~ .selection {
53  transform: translateX(calc(var(--container_width) * 0 / 3));
54}
55 
56.radio-input label:nth-child(2):has(input:checked) ~ .selection {
57  transform: translateX(calc(var(--container_width) * 1 / 3));
58}
59 
60.radio-input label:nth-child(3):has(input:checked) ~ .selection {
61  transform: translateX(calc(var(--container_width) * 2 / 3));
62}