Switch by ErzenXz

1.toggle-switch {
2  position: relative;
3  display: inline-block;
4  width: 80px;
5  height: 40px;
6  cursor: pointer;
7}
8
9.toggle-switch input[type="checkbox"] {
10  display: none;
11}
12
13.toggle-switch-background {
14  position: absolute;
15  top: 0;
16  left: 0;
17  width: 100%;
18  height: 100%;
19  background-color: #ddd;
20  border-radius: 20px;
21  box-shadow: inset 0 0 0 2px #ccc;
22  transition: background-color 0.3s ease-in-out;
23}
24
25.toggle-switch-handle {
26  position: absolute;
27  top: 5px;
28  left: 5px;
29  width: 30px;
30  height: 30px;
31  background-color: #fff;
32  border-radius: 50%;
33  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
34  transition: transform 0.3s ease-in-out;
35}
36
37.toggle-switch::before {
38  content: "";
39  position: absolute;
40  top: -25px;
41  right: -35px;
42  font-size: 12px;
43  font-weight: bold;
44  color: #aaa;
45  text-shadow: 1px 1px #fff;
46  transition: color 0.3s ease-in-out;
47}
48
49.toggle-switch input[type="checkbox"]:checked + .toggle-switch-handle {
50  transform: translateX(45px);
51  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 3px #05c46b;
52}
53
54.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background {
55  background-color: #05c46b;
56  box-shadow: inset 0 0 0 2px #04b360;
57}
58
59.toggle-switch input[type="checkbox"]:checked + .toggle-switch:before {
60  content: "On";
61  color: #05c46b;
62  right: -15px;
63}
64
65.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background .toggle-switch-handle {
66  transform: translateX(40px);
67}
68