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