Switch by hahuy95

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 .toggle-switch-background:hover {
14  box-shadow: inset 0 0 0 2px #a9b1bf;
15  transition: all 0.2s ease-in-out;
16}
17
18.toggle-switch .toggle-switch-handle:hover {
19  transition: all 0.2s ease-in-out;
20}
21
22.toggle-switch-background {
23  position: absolute;
24  top: 0;
25  left: 0;
26  width: 100%;
27  height: 100%;
28  background-color: #ddd;
29  border-radius: 12px;
30  box-shadow: inset 0 0 0 2px #ccc;
31  transition: background-color 0.3s ease-in-out;
32}
33
34.toggle-switch-handle {
35  position: absolute;
36  top: 5px;
37  left: 5px;
38  width: 30px;
39  height: 30px;
40  background-color: #fff;
41  border-radius: 22%;
42  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
43  transition: transform 0.3s ease-in-out;
44}
45
46.toggle-switch::before {
47  content: "";
48  position: absolute;
49  top: -25px;
50  right: -35px;
51  font-size: 12px;
52  font-weight: bold;
53  color: #aaa;
54  text-shadow: 1px 1px #fff;
55  transition: color 0.3s ease-in-out;
56}
57
58.toggle-switch input[type="checkbox"]:checked + .toggle-switch-handle {
59  transform: translateX(45px);
60  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 3px #12b76a;
61}
62
63.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background {
64  background-color: #12b76a;
65  box-shadow: inset 0 0 0 2px #039855;
66}
67
68.toggle-switch input[type="checkbox"]:checked + .toggle-switch:before {
69  content: "On";
70  color: #12b76a;
71  right: -15px;
72}
73
74.toggle-switch
75  input[type="checkbox"]:checked
76  + .toggle-switch-background
77  .toggle-switch-handle {
78  transform: translateX(40px);
79}
80