1#toggle_checkbox {
2  display: none;
3}
4
5label {
6  position: absolute;
7  top: 50%;
8  right: 0;
9  left: 0;
10  display: block;
11  width: 70px;
12  height: 30px;
13  margin: 0 auto;
14  transform: translateY(-50%);
15  cursor: pointer;
16}
17
18label:before {
19  top: 2px;
20  left: 3px;
21  width: 26px;
22  height: 26px;
23  border: 3px solid rgb(2, 169, 38);
24}
25
26label:after {
27  top: 0;
28  right: 0;
29  width: 70px;
30  height: 30px;
31  border: 3px solid #103445;
32}
33
34label:before, label:after {
35  content: "";
36  position: absolute;
37  border-radius: 50px;
38  box-sizing: border-box;
39  transition: 0.5s ease top, 0.5s ease left, 0.5s ease right, 0.5s ease width, 0.5s ease height, 0.5s ease border-color;
40}
41
42#toggle_checkbox:checked + label:before {
43  top: 0;
44  left: 0;
45  width: 70px;
46  height: 30px;
47  border-color: #143240;
48}
49
50#toggle_checkbox:checked + label:after {
51  top: 2px;
52  right: 3px;
53  width: 26px;
54  height: 26px;
55  border-color: red;
56}