1
2    <label class="switch">
3      <input type="checkbox" >
4      <span class="slider"></span>
5      
6      <div class="switch-labels">
7        <span class="label-on">ON</span>
8        <span class="label-off">OFF</span>
9      </div>
10      
11    </label>
12    

1
2    .switch {
3      position: relative;
4      display: inline-block;
5      width: 85px;
6      height: 34px;
7    }
8    
9    .switch input {
10      opacity: 0;
11      width: 0;
12      height: 0;
13    }
14    
15    .slider {
16      position: absolute;
17      cursor: pointer;
18      top: 0;
19      left: 0;
20      right: 0;
21      bottom: 0;
22      background-color: #e5e7eb;
23      transition: 0.3s;
24      border-radius: 17px;
25    }
26    
27    .slider:before {
28      position: absolute;
29      content: "";
30      height: 26px;
31      width: 26px;
32      left: 4px;
33      bottom: 4px;
34      background-color: #ffffff;
35      transition: 0.3s;
36      border-radius: 50%;
37      z-index: 2;
38    }
39    
40    input:checked + .slider {
41      background-color: #4ade80;
42    }
43    
44    input:checked + .slider:before {
45      transform: translateX(51px);
46    }
47    
48    .switch-labels {
49      position: absolute;
50      top: 0;
51      left: 0;
52      width: 100%;
53      height: 100%;
54      font-size: 12px;
55      font-family: Arial, sans-serif;
56      display: flex;
57      align-items: center;
58      justify-content: space-between;
59      padding: 0 13px;
60      box-sizing: border-box;
61      color: #ffffff;
62      pointer-events: none;
63    }
64    
65    .switch-labels span {
66      z-index: 1;
67      opacity: 1;
68      transition: opacity 0.3s;
69    }
70    
71    .label-on {
72      padding-right: 13px;
73    }
74    
75    .label-off {
76      padding-left: 13px;
77    }
78    
79    input:checked + .slider + .switch-labels .label-off,
80    input:not(:checked) + .slider + .switch-labels .label-on {
81      opacity: 0;
82    }
83