Radio by roroland

1.radio-input {
2  --base: rgb(119, 119, 119);
3  --ring: rgb(187, 176, 19);
4  --center: rgb(192, 165, 14);
5  display: grid;
6  grid-template-columns: 1fr;
7  grid-template-rows: min-content;
8  place-items: center;
9  place-content: center;
10  aspect-ratio: 1;
11  position: relative;
12  width: 50%;
13  height: 50%;
14}
15
16.radio-input > div {
17  display: flex;
18  flex-flow: row nowrap;
19  gap: 2rem;
20  position: relative;
21  z-index: 0;
22  grid-column: 1/-1;
23  grid-row: 1/-1;
24}
25
26.radio-input input[type="radio"] {
27  appearance: none;
28  outline: 2px solid var(--base);
29  box-shadow: 0 0 1.5em white;
30  padding: .5em;
31  border-radius: 50%;
32  width: .35rem;
33  height: .35rem;
34  cursor: pointer;
35  position: relative;
36  transition: all 1s ease-out;
37  z-index: 10;
38}
39
40.radio-input input[type="radio"]:hover {
41  scale: 1.25;
42}
43
44.radio-input input[type="radio"]:checked {
45  scale: 2;
46  outline: 2px solid var(--ring);
47  box-shadow: 0 0 1.5em white,  inset 0 0 .75em var(--center);
48  filter: blur(2px);
49}
50
51.radio-input div {
52  position: relative;
53}
54
55.radio-input .circ-container > * {
56  animation: spin 2.5s linear infinite;
57  background-color: rgb(255, 255, 255);
58  transition: all .3s ease-out;
59}
60
61.radio-input:has(input[type="radio"]:checked) div .circle {
62  --size: .3rem;
63  --offset: 6rem;
64  --toCheck: '';
65  --circWidth: 2.185rem;
66  --items: 8;
67  width: var(--size);
68  pointer-events: none;
69  aspect-ratio: 1;
70  border-radius: 50%;
71  background-color: var(--ring);
72  position: absolute;
73  left: var(--toCheck);
74  top: calc(var(--size) * -.5);
75  transform: translate(
76    calc(cos(var(--angle)) * var(--offset)),
77    calc(sin(var(--angle)) * var(--offset))
78  );
79}
80
81.circle:nth-of-type(1) {
82  --angle: calc(1 * (360deg / var(--items)));
83}
84
85.circle:nth-of-type(2) {
86  --angle: calc(2 * (360deg / var(--items)));
87}
88
89.circle:nth-of-type(3) {
90  --angle: calc(3 * (360deg / var(--items)));
91}
92
93.circle:nth-of-type(4) {
94  --angle: calc(4 * (360deg / var(--items)));
95}
96
97.circle:nth-of-type(5) {
98  --angle: calc(5 * (360deg / var(--items)));
99}
100
101.circle:nth-of-type(6) {
102  --angle: calc(6 * (360deg / var(--items)));
103}
104
105.circle:nth-of-type(7) {
106  --angle: calc(7 * (360deg / var(--items)));
107}
108
109.circle:nth-of-type(8) {
110  --angle: calc(8 * (360deg / var(--items)));
111}
112
113.radio-input div:has(label:nth-of-type(1) input[type="radio"]:checked) ~ div .circle {
114  --toCheck: calc(var(--circWidth) * -1.525 + var(--size));
115}
116
117.radio-input  div:has(label:nth-of-type(2) input[type="radio"]:checked) ~ div .circle {
118  --toCheck: calc(var(--size) * -.5);
119}
120
121.radio-input div:has(label:nth-of-type(3) input[type="radio"]:checked) ~ div .circle {
122  --toCheck: calc(var(--circWidth) * 1.5 - var(--size) * 2);
123}
124
125@keyframes spin {
126  0% {
127    rotate: 360deg;
128    scale: .5;
129    background-color: white;
130  }
131
132  50% {
133    scale: 1;
134    background-color: white;
135  }
136
137  60% {
138    scale: .25;
139    background-color: var(--center);
140  }
141
142  100% {
143    rotate: -360deg;
144    scale: .5;
145    background-color: var(--ring);
146    ;
147  }
148}
149