1.switch input {
2 display: none;
3}
4
5.switch {
6 width: 60px;
7 height: 30px;
8 position: relative;
9}
10
11.slider {
12 position: absolute;
13 top: 0;
14 bottom: 0;
15 left: 0;
16 right: 0;
17 border-radius: 30px;
18 box-shadow: 0 0 0 2px #777, 0 0 4px #777;
19 cursor: pointer;
20 border: 4px solid transparent;
21 overflow: hidden;
22 transition: 0.2s;
23}
24
25.slider:before {
26 position: absolute;
27 content: "";
28 width: 100%;
29 height: 100%;
30 background-color: #777;
31 border-radius: 30px;
32 transform: translateX(-30px);
33 /*translateX(-(w-h))*/
34 transition: 0.2s;
35}
36
37input:checked + .slider:before {
38 transform: translateX(30px);
39 /*translateX(w-h)*/
40 background-color: limeGreen;
41}
42
43input:checked + .slider {
44 box-shadow: 0 0 0 2px limeGreen, 0 0 8px limeGreen;
45}
46
47.switch200 .slider:before {
48 width: 200%;
49 transform: translateX(-82px);
50 /*translateX(-(w-h))*/
51}
52
53.switch200 input:checked + .slider:before {
54 background-color: red;
55}
56
57.switch200 input:checked + .slider {
58 box-shadow: 0 0 0 2px red, 0 0 8px red;
59}