Radio by ChristosMourgelas

1.radio-input {
2  display: flex;
3  flex-direction: column;
4  gap: 10px;
5}
6
7.value-radio {
8  display: none;
9}
10
11.value-radio-label {
12  display: flex;
13  align-items: center;
14  gap: 8px;
15  padding: 8px 12px;
16  border: 2px solid #4d4d4d;
17  border-radius: 20px;
18  color: #ccc;
19  background-color: #333;
20  cursor: pointer;
21  transition: all 0.3s;
22}
23
24.value-radio:checked + .value-radio-label {
25  border-color: #00b4ff;
26  background-color: #00b4ff;
27  color: #fff;
28}
29
30.value-radio-label::before {
31  content: '';
32  display: inline-block;
33  width: 16px;
34  height: 16px;
35  border-radius: 50%;
36  border: 2px solid #4d4d4d;
37  transition: all 1s;
38}
39
40.value-radio:checked + .value-radio-label::before {
41  border-color: #0175a6;
42  background-color: #ffffff;
43}