Switch by cosnametv

1.toggle-switch {
2  position: relative;
3  width: 80px;
4  height: 40px;
5}
6
7.toggle-switch input {
8  display: none;
9}
10
11.toggle-switch label {
12  position: absolute;
13  top: 0;
14  left: 0;
15  right: 0;
16  bottom: 0;
17  background: linear-gradient(to right, #2e2e2e, #4a4a4a);
18  border-radius: 20px;
19  cursor: pointer;
20  transition: background 0.3s;
21}
22
23.toggle-switch input:checked + label {
24  background: linear-gradient(to right, #66bb6a, #43a047);
25}
26
27.toggle-switch label:before {
28  content: "";
29  position: absolute;
30  height: 36px;
31  width: 36px;
32  left: 2px;
33  bottom: 2px;
34  background-color: #fff;
35  border-radius: 50%;
36  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
37  transition: transform 0.3s, background 0.3s;
38}
39
40.toggle-switch input:checked + label:before {
41  transform: translateX(40px);
42  background-color: #66bb6a;
43}
44