1.toggle {
2  position: relative;
3  width: 60px;
4  height: 34px;
5}
6
7.toggle input[type="checkbox"] {
8  display: none;
9}
10
11.toggle label {
12  position: absolute;
13  top: 0;
14  left: 0;
15  width: 60px;
16  height: 34px;
17  background-color: #ccc;
18  border-radius: 17px;
19  cursor: pointer;
20  transition: background-color 0.3s ease;
21}
22
23.toggle label::before {
24  content: "";
25  position: absolute;
26  top: 3px;
27  left: 3px;
28  width: 28px;
29  height: 28px;
30  border-radius: 50%;
31  background-color: #fff;
32  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
33  transition: transform 0.3s ease;
34}
35
36.toggle input:checked + label {
37  background-color: #6000df;
38}
39
40.toggle input:checked + label::before {
41  transform: translateX(26px);
42}
43
44.toggle label:hover {
45  background-color: #999;
46}
47
48.toggle input:checked + label:hover {
49  background-color: rgb(99, 33, 138);
50}
51
52.toggle input:active + label {
53  background-color: #6f4ea3;
54}
55
56.toggle input:checked:active + label {
57  background-color: #009b93;
58}
59
60.toggle input:focus + label {
61  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
62}
63