Radio by shadowmurphy

1.radio-form {
2  display: block;
3  margin: auto;
4  max-width: 10em;
5  position: relative;
6}
7
8.radio-form input {
9  position: fixed;
10  top: -1.5em;
11  left: -1.5em;
12}
13
14.radio-form label {
15  cursor: pointer;
16  display: block;
17  font-weight: bold;
18  text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.2);
19  transition: color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
20}
21
22.radio-form label:not(:last-of-type) {
23  margin-bottom: 1.5em;
24}
25
26.radio-form label span {
27  box-shadow: 0 0 0 0.2em currentColor inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.2), 0 0.3em 0.2em rgba(0, 0, 0, 0.2) inset;
28  display: inline-block;
29  margin-right: 0.5em;
30  vertical-align: bottom;
31  border-radius: 50%;
32  width: 1.5em;
33  height: 1.5em;
34  transition: transform 0.2s cubic-bezier(0.5, 0, 0.5, 2), box-shadow 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95), color 0.2s cubic-bezier(0.45, 0.05, 0.55, 0.95);
35}
36
37.radio-form input:checked + label,
38.radio-form input:checked + label span {
39  color: #255ff4;
40}
41
42.radio-form input:checked + label,
43.radio-form input:checked + label span {
44  transition-delay: 0.4s;
45}
46
47.radio-form label span {
48  transform: scale(1.2);
49}
50
51.radio-form .worm {
52  top: 0.375em;
53  left: 0.375em;
54  position: absolute;
55}
56
57.radio-form .worm__segment {
58  position: absolute;
59  top: 0;
60  left: 0;
61  width: 0.75em;
62  height: 0.75em;
63  border-radius: 50%;
64  transition: transform 0.4s cubic-bezier(0.45, 0.05, 0.55, 0.95);
65}
66
67.radio-form .worm__segment:before {
68  animation-duration: 0.4s;
69  animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
70  background: currentColor;
71  content: "";
72  display: block;
73  width: 100%;
74  height: 100%;
75  border-radius: 50%;
76}
77
78.radio-form .worm__segment:first-child:before,
79.radio-form .worm__segment:last-child:before {
80  box-shadow: 0 0 1em 0 currentColor;
81}
82
83@keyframes hop1 {
84  from,
85  to {
86    transform: translateX(0);
87  }
88
89  50% {
90    transform: translateX(-1.5em);
91  }
92}
93
94@keyframes hop2 {
95  from,
96  to {
97    transform: translateX(0);
98  }
99
100  50% {
101    transform: translateX(-1.5em);
102  }
103}
104
105@keyframes hop3 {
106  from,
107  to {
108    transform: translateX(0);
109  }
110
111  50% {
112    transform: translateX(-1.5em);
113  }
114}
115
116.radio-form input:nth-of-type(1):checked ~ .worm .worm__segment {
117  transform: translateY(0);
118}
119
120.radio-form input:nth-of-type(1):checked ~ .worm .worm__segment:before {
121  animation-name: hop1;
122}
123
124.radio-form input:nth-of-type(2):checked ~ .worm .worm__segment {
125  transform: translateY(3em);
126}
127
128.radio-form input:nth-of-type(2):checked ~ .worm .worm__segment:before {
129  animation-name: hop2;
130}
131
132.radio-form input:nth-of-type(3):checked ~ .worm .worm__segment {
133  transform: translateY(6em);
134}
135
136.radio-form input:nth-of-type(3):checked ~ .worm .worm__segment:before {
137  animation-name: hop3;
138}
139
140@media screen and (prefers-color-scheme: dark) {
141  body {
142    background: #17181c;
143    color: #e3e4e8;
144  }
145
146  .radio-form input:checked + label,
147  .radio-form input:checked + label span,
148  .radio-form .worm__segment:before {
149    color: #5583f6;
150  }
151}
152