Switch by InfinityLoopGames

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