Switch by Subaashbala

1/* The switch - the box around the slider */
2.switch {
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 5em;
7  height: 2.25em;
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: #e7eff9;
26  outline: 1px solid #f3f8fe;
27  box-shadow: 0 4px 5px #f3f8fe inset, 0 4px 5px #c8d5e6;
28  transition: 0.4s;
29  border-radius: 30px;
30}
31
32.slider:before {
33  position: absolute;
34  content: "off";
35  font-size: 0.85em;
36  color: #d2d6d8;
37  display: flex;
38  justify-content: center;
39  align-items: center;
40  min-height: 2em;
41  min-width: 2em;
42  border-radius: 20px;
43  left: 0.35em;
44  bottom: 0.3em;
45  background-color: transparent;
46  outline: 2px solid #d2d6d8;
47  transition: 0.4s;
48}
49
50.switch input:checked + .slider:before {
51  content: "on";
52  background-color: #d2d6d8;
53  color: white;
54  transform: translateX(3.1em);
55}
56