1#checkbox {
2  display: none;
3}
4
5.Switch {
6  position: relative;
7  width: 50px;
8  height: 100px;
9  background-color: rgb(228, 228, 228);
10  border-radius: 30px;
11  z-index: 1;
12  cursor: pointer;
13  display: flex;
14  align-items: center;
15  justify-content: center;
16  box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.274) inset,
17    -2px 0px 5px rgba(255, 255, 255, 0.411) inset;
18}
19
20.Switch::before {
21  content: "";
22  background-color: rgb(39, 39, 39);
23  position: absolute;
24  height: 80%;
25  width: 5px;
26  border-radius: 5px;
27}
28
29.Switch::after {
30  background-color: #5e5e5e;
31  border: 1px solid rgb(35, 255, 35);
32  content: "";
33  position: absolute;
34  height: 5px;
35  width: 25px;
36  top: 15px;
37  transition-duration: .3s;
38  box-shadow: 5px 2px 5px rgba(8, 8, 8, 0.288);
39  border-radius: 5px;
40}
41
42#checkbox:checked+.Switch::after {
43  transform: translateY(65px);
44  transition-duration: .3s;
45  border: 1px solid rgb(236, 0, 0);
46}
47