1.checkbox {
2  display: none;
3}
4
5.slider {
6  width: 60px;
7  height: 30px;
8  background-color: lightgray;
9  border-radius: 20px;
10  overflow: hidden;
11  display: flex;
12  align-items: center;
13  border: 4px solid transparent;
14  transition: .3s;
15  box-shadow: 0 0 10px 0 rgb(0, 0, 0, 0.25) inset;
16  cursor: pointer;
17}
18
19.slider::before {
20  content: '';
21  display: block;
22  width: 100%;
23  height: 100%;
24  background-color: #fff;
25  transform: translateX(-30px);
26  border-radius: 20px;
27  transition: .3s;
28  box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
29}
30
31.checkbox:checked ~ .slider::before {
32  transform: translateX(30px);
33  box-shadow: 0 0 10px 3px rgb(0, 0, 0, 0.25);
34}
35
36.checkbox:checked ~ .slider {
37  background-color: #2196F3;
38}
39
40.checkbox:active ~ .slider::before {
41  transform: translate(0);
42}