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  position: absolute;
20  cursor: pointer;
21  inset: 0;
22  background: #d4acfb;
23  border-radius: 50px;
24  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
25}
26
27.slider:before {
28  position: absolute;
29  content: "";
30  height: 1.4em;
31  width: 1.4em;
32  left: 0.3em;
33  bottom: 0.3em;
34  background-color: white;
35  border-radius: 50px;
36  box-shadow: 0 0px 20px rgba(0,0,0,0.4);
37  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
38}
39
40.switch input:checked + .slider {
41  background: #b84fce;
42}
43
44.switch input:focus + .slider {
45  box-shadow: 0 0 1px #b84fce;
46}
47
48.switch input:checked + .slider:before {
49  transform: translateX(1.6em);
50  width: 2em;
51  height: 2em;
52  bottom: 0;
53}