1/* The switch - the box around the slider */
2.switch {
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 3.5em;
7  height: 2em;
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  --background: #28096b;
20  position: absolute;
21  cursor: pointer;
22  top: 0;
23  left: 0;
24  right: 0;
25  bottom: 0;
26  background-color: var(--background);
27  transition: .5s;
28  border-radius: 30px;
29}
30
31.slider:before {
32  position: absolute;
33  content: "";
34  height: 1.4em;
35  width: 1.4em;
36  border-radius: 50%;
37  left: 10%;
38  bottom: 15%;
39  box-shadow: inset 8px -4px 0px 0px #fff000;
40  background: var(--background);
41  transition: .5s;
42}
43
44input:checked + .slider {
45  background-color: #522ba7;
46}
47
48input:checked + .slider:before {
49  transform: translateX(100%);
50  box-shadow: inset 15px -4px 0px 15px #fff000;
51}