1/* The switch - the box around the slider */
2.switch {
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 5.2em;
7  height: 2em;
8  overflow: hidden;
9}
10
11/* Hide default HTML checkbox */
12.switch input {
13  opacity: 0;
14  width: 0;
15  height: 0;
16}
17
18/* The slider */
19.slider {
20  position: absolute;
21  cursor: pointer;
22  top: 0;
23  left: 0;
24  right: 0;
25  bottom: 0;
26  background-color: #eee;
27  transition: .4s;
28  border-radius: 30px;
29}
30
31.slider:before {
32  position: absolute;
33  content: "";
34  height: 1.4em;
35  width: 1.4em;
36  border-radius: 20px;
37  border: 1px solid #333;
38  left: 0.4em;
39  bottom: 0.2em;
40  background-color: white;
41  transition: .4s;
42}
43
44input:checked + .slider {
45  background-color: #2196F3;
46}
47
48input:focus + .slider {
49  box-shadow: 0 0 1px #2196F3;
50}
51
52input:checked + .slider:before {
53  transform: translateX(3em);
54}
55
56.switch .text {
57  position: absolute;
58  top: 50%;
59  pointer-events: none;
60  text-transform: uppercase;
61  transform: translateY(-50%);
62  transition: .4s;
63}
64
65.switch .text.on {
66  left: .8rem;
67  transform: translateX(-3rem) translateY(-50%);
68}
69
70.switch .text.off {
71  color: #999;
72  right: .8rem;
73}
74
75input:checked ~ .text.off {
76  transform: translateX(3rem) translateY(-50%);
77}
78
79input:checked ~ .text.on {
80  transform: translateX(0) translateY(-50%);
81}