1.radio-input {
2  display: flex;
3  max-width: 300px;
4  justify-content: space-around;
5  align-items: center;
6  flex: 1;
7}
8
9.radio-input > .radio {
10  position: relative;
11  display: flex;
12  align-items: center;
13  justify-content: center;
14  width: 40px;
15}
16
17.input {
18  z-index: 1;
19  appearance: none;
20  width: 28px;
21  height: 28px;
22  border: 2px solid #48e9ff88;
23  transform-origin: center;
24  transform: rotateX(120deg) rotateZ(45deg);
25  transition: all 0.4s ease-in-out;
26}
27
28.input:hover:not(.input:checked) {
29  animation: light 8s ease-in-out forwards infinite alternate;
30}
31
32.input:checked {
33  animation: Scale 2.8s ease-in-out forwards infinite alternate;
34  box-shadow: 0 0 40px #48e9ff, inset 0 0 4px #48e9ff;
35}
36
37@keyframes light {
38  50% {
39    box-shadow: 0 0 40px #48e9ff, inset 0 0 8px #48e9ff;
40  }
41}
42
43label {
44  position: absolute;
45  top: 0;
46  left: 0;
47  right: 0;
48  bottom: 0;
49  width: 0;
50  height: 0;
51  margin: auto;
52  transition: all 0.4s ease-in-out;
53  transform: rotateX(120deg) rotateZ(0deg);
54  opacity: 0;
55  cursor: pointer;
56}
57
58label .center > div {
59  position: absolute;
60  width: 8px;
61  height: 8px;
62  opacity: 0;
63}
64
65.input:checked + label .center > div {
66  opacity: 1;
67}
68
69label .center > div:nth-child(1) {
70  bottom: 0;
71  right: 0;
72  border-right: 1px solid #48e9ff;
73  border-bottom: 1px solid #48e9ff;
74}
75
76label .center > div:nth-child(2) {
77  right: 0;
78  border-right: 1px solid #48e9ff;
79  border-top: 1px solid #48e9ff;
80}
81
82label .center > div:nth-child(3) {
83  bottom: 0;
84  border-left: 1px solid #48e9ff;
85  border-bottom: 1px solid #48e9ff;
86}
87
88label .center > div:nth-child(4) {
89  left: 0;
90  border-left: 1px solid #48e9ff;
91  border-top: 1px solid #48e9ff;
92}
93
94.input:checked + label {
95  opacity: 1;
96  width: 40px;
97  height: 40px;
98  transform: rotateX(120deg) rotateZ(45deg);
99}
100
101.input:checked ~ .top {
102  transform: rotateX(120deg) rotateZ(45deg) translateZ(12px) !important;
103}
104
105.top,
106.bottom {
107  position: absolute;
108  top: 0;
109  left: 0;
110  right: 0;
111  bottom: 0;
112  margin: auto;
113  width: 12px;
114  height: 12px;
115  opacity: 0;
116  transform: rotateX(120deg) rotateZ(45deg) translateZ(0px);
117}
118
119.input:checked ~ .top,
120.input:checked ~ .bottom {
121  background: #48e9ff;
122  transition: all 0.4s ease-in-out;
123  opacity: 1;
124}
125
126.input:checked ~ .bottom {
127  transform: rotateX(120deg) rotateZ(45deg) translateZ(-24px);
128  z-index: -1;
129}
130