1/* The switch - the box around the slider */
2.switch {
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 100px;
7  height: 2em;
8}
9
10
11/* The slider */
12.slider {
13  position: absolute;
14  cursor: pointer;
15  top: 0;
16  left: 0;
17  right: 0;
18  bottom: 0;
19  background-color: #fff;
20  color: #000;
21  font-weight: 600;
22  border-radius: 30px;
23  display: flex;
24  justify-content: space-around;
25  align-items: center;
26  transition: .4s;
27}
28
29.slider:before {
30  position: absolute;
31  content: "On";
32  height: 90%;
33  width: 48%;
34  left: 2%;
35  border-radius: 20px;
36  background-color: white;
37  color: green;
38  display: grid;
39  align-content: center;
40  justify-content: center;
41  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset, 0 -1.31em 1.31em -1.31em rgba(0, 0, 0, 0.3) inset, 0 0 1px 0 rgba(0, 0, 0, 0.1);
42  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
43  transition: .4s;
44}
45
46.slider:after {
47  content: "";
48  position: absolute;
49  top: -7px;
50  left: -7px;
51  right: -7px;
52  bottom: -7px;
53  border-radius: 1.71em;
54  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.1));
55  z-index: -1;
56}
57
58.switch input:checked + .slider {
59  background-color: #21f3a3;
60  color: #fff;
61}
62
63.switch input:checked + .slider:before {
64  content: "Off";
65  transform: translateX(100%);
66  color: red;
67}
68
69.switch input {
70  display: none;
71}