1/* The switch - the box around the slider */
2.switch {
3 font-size: 17px;
4 position: relative;
5 display: inline-block;
6 width: 3.5em;
7 height: 2em;
8}
9
10/* Hide default HTML checkbox */
11.switch input {
12 opacity: 0;
13 width: 0;
14 height: 0;
15}
16
17/* The slider */
18.slider {
19 position: absolute;
20 cursor: pointer;
21 top: 0;
22 left: 0;
23 right: 0;
24 bottom: 0;
25 background-color: #ccc;
26 transition: .4s;
27 border-radius: 30px;
28}
29
30.slider:before {
31 position: absolute;
32 content: "";
33 height: 1.4em;
34 width: 1.4em;
35 border-radius: 20px;
36 left: 0.3em;
37 bottom: 0.3em;
38 background-color: white;
39 transition: .4s;
40}
41
42input:checked + .slider {
43 background-color: rgb(0,221,80);
44}
45
46input:focus + .slider {
47 box-shadow: 0 0 1px rgb(0,221,80);
48}
49
50input:checked + .slider:before {
51 transform: translateX(1.5em);
52}