1.switch {
2  background-color: black;
3  width: 150px;
4  height: 195px;
5  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
6  border-radius: 5px;
7  padding: 20px;
8  perspective: 700px;
9}
10
11.switch input {
12  display: none;
13}
14
15.switch input:checked + .button {
16  transform: translateZ(20px) rotateX(25deg);
17  box-shadow: 0 -10px 20px #ff1818;
18}
19
20.switch input:checked + .button .light {
21  animation: flicker 0.2s infinite 0.3s;
22}
23
24.switch input:checked + .button .shine {
25  opacity: 1;
26}
27
28.switch input:checked + .button .shadow {
29  opacity: 0;
30}
31
32.switch .button {
33  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
34  transform-origin: center center -20px;
35  transform: translateZ(20px) rotateX(-25deg);
36  transform-style: preserve-3d;
37  background-color: #9b0621;
38  width: 66%;
39  height: 100%;
40  position: relative;
41  cursor: pointer;
42  background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
43  background-repeat: no-repeat;
44}
45
46.switch .button::before {
47  content: "";
48  background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000;
49  background-repeat: no-repeat;
50  width: 100%;
51  height: 50px;
52  transform-origin: top;
53  transform: rotateX(-90deg);
54  position: absolute;
55  top: 0;
56}
57
58.switch .button::after {
59  content: "";
60  background-image: linear-gradient(#650000, #320000);
61  width: 100%;
62  height: 50px;
63  transform-origin: top;
64  transform: translateY(50px) rotateX(-90deg);
65  position: absolute;
66  bottom: 0;
67  box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5);
68}
69
70.switch .light {
71  opacity: 0;
72  animation: light-off 1s;
73  position: absolute;
74  width: 100%;
75  height: 100%;
76  background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%);
77}
78
79.switch .dots {
80  position: absolute;
81  width: 100%;
82  height: 100%;
83  background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
84  background-size: 10px 10px;
85}
86
87.switch .characters {
88  position: absolute;
89  width: 100%;
90  height: 100%;
91  background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%;
92  background-repeat: no-repeat;
93}
94
95.switch .shine {
96  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
97  opacity: 0.3;
98  position: absolute;
99  width: 100%;
100  height: 100%;
101  background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
102  background-repeat: no-repeat;
103}
104
105.switch .shadow {
106  transition: all 0.3s cubic-bezier(1, 0, 1, 1);
107  opacity: 1;
108  position: absolute;
109  width: 100%;
110  height: 100%;
111  background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
112  background-repeat: no-repeat;
113}
114
115@keyframes flicker {
116  0% {
117    opacity: 1;
118  }
119
120  80% {
121    opacity: 0.8;
122  }
123
124  100% {
125    opacity: 1;
126  }
127}
128
129@keyframes light-off {
130  0% {
131    opacity: 1;
132  }
133
134  80% {
135    opacity: 0;
136  }
137}