Radio by Arqui9897

1.option-input {
2  -webkit-appearance: none;
3  -moz-appearance: none;
4  -ms-appearance: none;
5  -o-appearance: none;
6  appearance: none;
7  position: relative;
8  top: 13.33333px;
9  right: 0;
10  bottom: 0;
11  left: 0;
12  height: 40px;
13  width: 40px;
14  transition: all 0.15s ease-out 0s;
15  border: none;
16  cursor: pointer;
17  display: inline-block;
18  margin-right: 0.5rem;
19  outline: none;
20  z-index: 1000;
21}
22
23.option-input:hover {
24  background: #fa9115;
25}
26
27.option-input:checked {
28  background: #faa91b;
29}
30
31.option-input:checked::before {
32  width: 80px;
33  height: 80px;
34  display: flex;
35  font-weight: bold;
36  position: absolute;
37  align-items: center;
38  justify-content: center;
39}
40
41.option-input:checked::after {
42  -webkit-animation: click-wave 0.65s;
43  -moz-animation: click-wave 0.65s;
44  animation: click-wave 0.65s;
45  content: '';
46  display: block;
47  position: relative;
48  z-index: 100;
49}
50
51.option-input.radio {
52  border-radius: 50%;
53}
54
55.option-input.radio::after {
56  border-radius: 50%;
57}
58
59@keyframes click-wave {
60  0% {
61    height: 40px;
62    width: 40px;
63    opacity: 0.35;
64    position: relative;
65  }
66
67  100% {
68    height: 200px;
69    width: 200px;
70    margin-left: -80px;
71    margin-top: -80px;
72    opacity: 0;
73  }
74}
75
76.circlegg {
77  position: relative;
78  width: 70px;
79  height: 70px;
80  border-radius: 50%;
81  background: linear-gradient(45deg, transparent, transparent 40%, yellow),
82    linear-gradient(#040404, #0b0707);
83  animation: rotate 1.5s linear infinite;
84}
85
86.circlegg:before,
87.circlegg:after {
88  content: " ";
89  position: absolute;
90  inset: 4px;
91  background: linear-gradient(#181818, #1f1c1c);
92  border-radius: inherit;
93}
94
95.circlegg:before {
96  background: linear-gradient(45deg, transparent, transparent 40%, rgb(206, 91, 49));
97  filter: blur(25px);
98}
99
100@keyframes rotate {
101  100% {
102    transform: rotate(360deg);
103    filter: hue-rotate(360deg);
104  }
105}
106