Radio by Pradeepsaranbishnoi

1.Radio input[type="radio"] {
2  position: absolute;
3  left: -100px;
4}
5.Radio input[type="radio"] + label {
6  position: relative;
7  display: block;
8  line-height: 3rem;
9  cursor: pointer;
10  white-space: nowrap;
11  color: #61cea5;
12}
13
14.Radio input[type="radio"] + label::before,
15.Radio input[type="radio"] + label::after {
16  content: "";
17  display: inline-block;
18  position: absolute;
19  top: 50%;
20  left: 0;
21  transform: translateY(-50%);
22  transition: 0.5s;
23}
24
25.Radio input[type="radio"] + label {
26  padding-left: 3rem;
27}
28
29.Radio input[type="radio"] + label::before {
30  width: 2rem;
31  aspect-ratio: 1 / 1;
32  border-radius: 50%;
33  background: #61cea5;
34}
35
36.Radio input[type="radio"] + label::after {
37  left: 0.2rem;
38  width: 1.4rem;
39  transform: translateY(-50%) scale(0);
40}
41
42.Radio input[type="radio"]:not(:checked) + label::after {
43  animation: radio 0.5s linear;
44}
45
46.Radio input[type="radio"]:checked + label::after {
47  transform: translateY(-50%) scale(1);
48}
49
50.Radio input[type="radio"] + label::after {
51  aspect-ratio: 1 / 1;
52  border: 0.1rem solid #fff;
53  border-radius: 50%;
54  background: radial-gradient(circle at 70% 30%, #fff, rgba(0, 0, 0, 0) 25%),
55    radial-gradient(
56      circle at 60% 55%,
57      rgba(0, 0, 0, 0) 60%,
58      rgba(255, 0, 255, 0.8) 100%
59    ),
60    radial-gradient(
61      circle at 50% 50%,
62      rgba(0, 0, 0, 0) 40%,
63      rgba(0, 255, 255, 0.2) 60%,
64      rgba(0, 0, 0, 0) 68%
65    ),
66    radial-gradient(
67      circle at 50% 55%,
68      rgba(0, 0, 0, 0) 35%,
69      rgba(255, 255, 0, 0.2) 45%,
70      rgba(0, 0, 0, 0) 55%
71    );
72}
73
74@keyframes radio {
75  0% {
76    transform: translateY(-50%) scale(1);
77  }
78  100% {
79    transform: translateY(-50%) scale(1.7);
80  }
81}
82