Radio by Na3ar-17

1.radio-input {
2  display: flex;
3  flex-direction: column;
4  gap: 10px;
5}
6
7.radio-input * {
8  box-sizing: border-box;
9  padding: 0;
10  margin: 0;
11}
12
13.radio-input label {
14  display: flex;
15  align-items: center;
16  gap: 15px;
17  padding: 0px 20px;
18  width: 220px;
19  cursor: pointer;
20  height: 50px;
21  position: relative;
22}
23
24.radio-input label::before {
25  position: absolute;
26  content: "";
27  top: 50%;
28  left: 50%;
29  transform: translate(-50%, -50%);
30  width: 220px;
31  height: 45px;
32  z-index: -1;
33  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
34  border-radius: 10px;
35  border: 2px solid transparent;
36}
37.radio-input label:hover::before {
38  transition: all 0.2s ease;
39  background-color: #2a2e3c;
40}
41
42.radio-input .label:has(input:checked)::before {
43  background-color: #2d3750;
44  border-color: #435dd8;
45  height: 50px;
46}
47.radio-input .label .text {
48  color: #fff;
49}
50
51.radio-input .label input[type="radio"] {
52  background-color: #202030;
53  appearance: none;
54  width: 17px;
55  height: 17px;
56  border-radius: 50%;
57  display: flex;
58  justify-content: center;
59  align-items: center;
60}
61.radio-input .label input[type="radio"]:checked {
62  background-color: #435dd8;
63  -webkit-animation: puls 0.7s forwards;
64  animation: pulse 0.7s forwards;
65}
66
67.radio-input .label input[type="radio"]:before {
68  content: "";
69  width: 6px;
70  height: 6px;
71  border-radius: 50%;
72  transition: all 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
73  background-color: #fff;
74  transform: scale(0);
75}
76
77.radio-input .label input[type="radio"]:checked::before {
78  transform: scale(1);
79}
80
81@keyframes pulse {
82  0% {
83    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
84  }
85  70% {
86    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
87  }
88  100% {
89    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
90  }
91}
92