1/* The switch - the box around the slider */
2.switch {
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 4em;
7  height: 2em;
8}
9
10/* Hide default HTML checkbox */
11.switch .chk1 {
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: 5px;
28}
29
30.slider:before {
31  position: absolute;
32  content: "";
33  height: 1.4em;
34  width: 1.4em;
35  border-radius: 2.5px;
36  left: 0.3em;
37  bottom: 0.3em;
38  background-color: white;
39  transition: 0.4s;
40  box-shadow: 0 6px 7px rgba(0,0,0,0.3);
41}
42
43.slider:after {
44  position: absolute;
45  content: "";
46  height: 1.4em;
47  width: 1.4em;
48  border-radius: 2.5px;
49  left: 2.3em;
50  bottom: 0.3em;
51  background-color: #ccc;
52  transition: 0.4s;
53  box-shadow: 0 0px 0px rgba(0,0,0,0.3);
54}
55
56.chk1:checked + .slider:before {
57  background-color: #ccc;
58  box-shadow: 0 0px 0px rgba(0,0,0,0.3);
59}
60
61.chk1:checked + .slider:after {
62  background-color: rgb(0, 182, 45);
63  box-shadow: 0 6px 7px rgba(0,0,0,0.3);
64}