Switch by uxRakhal

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: white;
23  border-radius: 50px;
24  overflow: hidden;
25  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
26}
27
28.slider:before {
29  position: absolute;
30  content: "";
31  height: 1.4em;
32  width: 1.4em;
33  right: 0.3em;
34  bottom: 0.3em;
35  transform: translateX(150%);
36  background-color: #59d102;
37  border-radius: inherit;
38  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
39}
40
41.slider:after {
42  position: absolute;
43  content: "";
44  height: 1.4em;
45  width: 1.4em;
46  left: 0.3em;
47  bottom: 0.3em;
48  background-color: #ff0000;
49  border-radius: inherit;
50  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
51}
52
53.switch input:focus + .slider {
54  box-shadow: 0 0 1px #59d102;
55}
56
57.switch input:checked + .slider:before {
58  transform: translateY(0);
59}
60
61.switch input:checked + .slider::after {
62  transform: translateX(-150%);
63}
64