Radio by Saiyed-Tanvir

1.container {
2  transform-style: preserve-3d;
3  perspective: 1000px;
4}
5
6.pane {
7  outline: 2px solid #00ff6a;
8  box-shadow: 0 0 10px #00ff6a77, inset 0 0 10px #00ff6a77;
9  height: 1cm;
10  width: 4.5cm;
11  border-radius: 5px;
12  position: relative;
13  overflow: hidden;
14  transition: 0.7s ease;
15}
16
17.input {
18  display: none;
19}
20
21.label {
22  height: 1cm;
23  width: 1.5cm;
24  float: left;
25  font-weight: 600;
26  letter-spacing: -1px;
27  font-size: 14px;
28  padding: 0px;
29  position: relative;
30  z-index: 1;
31  color: #00ff6a;
32  text-align: center;
33  padding-top: 10px;
34}
35
36.selection {
37  display: none;
38  position: absolute;
39  height: 1cm;
40  width: calc(4.5cm / 3);
41  z-index: 0;
42  left: 0;
43  top: 0;
44  box-shadow: 0 0 10px #00ff6a77;
45  transition: .15s ease;
46}
47
48.label:has(input:checked) {
49  color: #212121;
50}
51
52.pane:has(.label:nth-child(1):hover) {
53  transform: rotateY(-30deg);
54}
55
56.pane:has(.label:nth-child(3):hover) {
57  transform: rotateY(35deg);
58}
59
60.label:has(input:checked) ~ .selection {
61  background-color: #00ff6a;
62  display: inline-block;
63}
64
65.label:nth-child(1):has(input:checked) ~ .selection {
66  transform: translateX(calc(4.5cm * 0/3));
67}
68
69.label:nth-child(2):has(input:checked) ~ .selection {
70  transform: translateX(calc(4.5cm * 1/3));
71}
72
73.label:nth-child(3):has(input:checked) ~ .selection {
74  transform: translateX(calc(4.5cm * 2/3));
75}