1.switch {
2 position: relative;
3 width: 55px;
4 height: 15px;
5}
6
7.switch input {
8 opacity: 0;
9 width: 0;
10 height: 0;
11}
12
13.slider {
14 position: absolute;
15 cursor: pointer;
16 top: 0;
17 left: 0;
18 right: 0;
19 bottom: 0;
20 border-radius: 34px;
21 background-color: #ccc;
22 -webkit-transition: .4s;
23 transition: .4s;
24}
25
26.slider:before {
27 position: absolute;
28 content: "";
29 height: 26px;
30 width: 26px;
31 left: 0px;
32 bottom: -5px;
33 background-color: red;
34 -webkit-transition: .4s;
35 transition: .4s;
36 box-sizing: border-box;
37 border: 10px solid white;
38 border-radius: 50%;
39}
40
41input:checked + .slider {
42 background-color: #06a606;
43}
44
45input:checked + .slider:before {
46 -webkit-transform: translateX(26px);
47 -ms-transform: translateX(26px);
48 transform: translateX(30px);
49 background: limegreen;
50 box-sizing: border-box;
51 border: 10px solid white;
52}