Radio by Peary74

1.radio-component {
2  display: flex;
3  padding: 15px;
4  cursor: pointer;
5  transition: 0.3s;
6}
7
8.radiostyle {
9  display: none;
10}
11
12.radioTxt1 {
13  padding: 10px 40px;
14  color: #fd9800;
15  font-size: 20px;
16  text-transform: uppercase;
17  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
18}
19
20.radioTxt2 {
21  padding: 10px 40px;
22  color: #7e7e7e;
23  font-size: 20px;
24  text-transform: uppercase;
25  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
26}
27
28.radioTxt3 {
29  padding: 10px 40px;
30  color: #181818;
31  font-size: 20px;
32  text-transform: uppercase;
33  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
34}
35
36.radio-component .RadioBtn:hover {
37  background: #ffdf6a;
38  border-radius: 100px;
39}
40
41.radio-component .RadioBtn2:hover {
42  background: #cacaca;
43  border-radius: 100px;
44}
45
46.radio-component .RadioBtn3:hover {
47  background: #313239;
48  border-radius: 100px;
49}
50
51.radiostyle:checked~ .RadioBtn {
52  display: inline-block;
53  position: relative;
54  z-index: 1;
55  top: 3px;
56  left: 30px;
57  width: 44px;
58  height: 44px;
59  background-color: #ffd401;
60  border-radius: 50px;
61  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
62  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
63  transform: rotate(-45deg);
64}
65
66.radiostyle:checked~ .RadioBtn2 {
67  display: inline-block;
68  position: relative;
69  z-index: 1;
70  top: 3px;
71  left: 30px;
72  width: 44px;
73  height: 44px;
74  background-color: #e8e8e8;
75  border-radius: 50px;
76  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
77  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
78  transform: rotate(-45deg);
79}
80
81.radiostyle:checked~ .RadioBtn3 {
82  display: inline-block;
83  position: relative;
84  z-index: 1;
85  top: 3px;
86  left: 30px;
87  width: 44px;
88  height: 44px;
89  background-color: #000;
90  border-radius: 50px;
91  box-shadow: 0 2px 6px rgba(255, 255, 255, .3);
92  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
93  transform: rotate(-45deg);
94}
95
96.RadioBtn .crater {
97  position: absolute;
98  background-color: #ffbb00;
99  opacity: 1;
100  transition: opacity 200ms ease-in-out;
101  border-radius: 100%;
102}
103
104.RadioBtn2 .crater {
105  position: absolute;
106  background-color: #b4b4b4;
107  opacity: 1;
108  transition: opacity 200ms ease-in-out;
109  border-radius: 100%;
110}
111
112.RadioBtn3 .crater {
113  position: absolute;
114  background-color: #2e2f33;
115  opacity: 1;
116  transition: opacity 200ms ease-in-out;
117  border-radius: 100%;
118}
119
120.radio-component .Krt1 {
121  top: 18px;
122  left: 10px;
123  width: 4px;
124  height: 4px;
125}
126
127.radio-component .Krt2 {
128  top: 28px;
129  left: 22px;
130  width: 6px;
131  height: 6px;
132}
133
134.radio-component .Krt3 {
135  top: 10px;
136  left: 25px;
137  width: 8px;
138  height: 8px;
139}
140  
141  
142  
143  
144  
145  
146  
147  
148  
149  
150  
151  
152  
153  
154