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  top: 0;
22  left: 0;
23  right: 0;
24  bottom: 0;
25  background-color: #223243;
26  transition: .4s;
27  border-radius: 30px;
28}
29
30.slider:before {
31  position: absolute;
32  content: "";
33  height: 1.4em;
34  width: 1.4em;
35  border-radius: 20px;
36  left: 0.3em;
37  bottom: 0.3em;
38  background-color: #223243;
39  box-shadow: inset 2px -2px 0 1.8px #fff;
40  transition: .4s;
41  animation: anima1 0.3s linear;
42}
43
44@keyframes anima1 {
45  0% {
46    transform: translateX(1.5em);
47  }
48
49  80% {
50    transform: translateX(-0.3em);
51  }
52
53  100% {
54    transform: translateX(0em);
55  }
56}
57
58.switch input:checked + .slider:before {
59  background-color: yellow;
60  box-shadow: none;
61  transform: translateX(1.5em);
62  animation: anima 0.3s linear;
63}
64
65@keyframes anima {
66  0% {
67    transform: translateX(0px)
68  }
69
70  80% {
71    transform: translateX(1.6em)
72  }
73
74  100% {
75    transform: translateX(1.4em)
76  }
77}