1.toggle-switch {
2  position: relative;
3  width: 90px;
4  height: 34px;
5  margin: 20px;
6}
7
8.toggle-switch input[type="checkbox"] {
9  opacity: 0;
10  width: 0;
11  height: 0;
12}
13
14.toggle-switch-label {
15  position: absolute;
16  top: 0;
17  left: 0;
18  right: 0;
19  bottom: 0;
20  background-color: #ddd;
21  border-radius: 34px;
22  cursor: pointer;
23  transition: all 0.4s ease;
24}
25
26.toggle-switch-label:before,
27.toggle-switch-label:after {
28  content: "";
29  display: block;
30  position: absolute;
31  top: 0;
32  bottom: 0;
33  margin: auto;
34}
35
36.toggle-switch-label:before {
37  left: 10px;
38  width: 26px;
39  height: 26px;
40  background-color: white;
41  border-radius: 50%;
42  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
43  transition: all 0.4s ease;
44}
45
46.toggle-switch-label:after {
47  left: 0;
48  width: 46px;
49  height: 34px;
50  background-color: #fff;
51  border-radius: 34px;
52  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
53  transition: all 0.4s ease;
54}
55
56.toggle-switch-checkbox:checked + .toggle-switch-label:before {
57  transform: translateX(46px);
58}
59
60.toggle-switch-checkbox:checked + .toggle-switch-label {
61  background-color: #000000;
62}
63
64.toggle-switch-checkbox:checked + .toggle-switch-label:after {
65  transform: scale(0);
66}
67
68.toggle-switch-text {
69  position: absolute;
70  top: 5px;
71  left: 110px;
72  font-size: 16px;
73  font-weight: bold;
74  color: rgb(255, 255, 255);
75  text-shadow: 1px 1px 2px rgba(253, 251, 251, 0.2);
76  transition: all 0.4s ease;
77}
78
79.toggle-switch-checkbox:checked + .toggle-switch-label + .toggle-switch-text {
80  color: rgb(255, 255, 255);
81}
82