Switch by BurgiSimon

1/* The switch - the box around the slider */
2.switch {
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 4.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: #ff3636;
26  transition: 0.1s;
27  transition-delay: 0.2s;
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: 20px;
37  left: 0.3em;
38  bottom: 0.3em;
39  background-color: white;
40  transition-delay: 0.2s;
41  transition: 0.1s;
42}
43
44.switch input:checked + .slider {
45  transition-delay: 0.2s;
46  background-color: #00c763;
47}
48
49.switch input:focus + .slider {
50  transition-delay: 0.2s;
51  box-shadow: 0 0 1px #00c763;
52}
53
54.switch input:checked + .slider:before {
55  transform: translateX(2.5em);
56  transition-delay: 0.2s;
57  transition-duration: 0.1s;
58}
59
60/* Animation Right */
61@keyframes slideRight {
62  0% {
63    transform: translateX(0) translateY(0);
64  }
65  20% {
66    transform: translateX(0.5em) translateY(-1.5em);
67  }
68  40% {
69    transform: translateX(1em) translateY(-1.75em); /* Highest Point */
70  }
71  60% {
72    transform: translateX(1.5em) translateY(-1.5em);
73  }
74  80% {
75    transform: translateX(2em) translateY(-1.25em);
76  }
77  100% {
78    transform: translateX(2.5em) translateY(0);
79  }
80}
81
82/* Slide Animation Left */
83@keyframes slideLeft {
84  0% {
85    transform: translateX(2.5em) translateY(0);
86  }
87  20% {
88    transform: translateX(2em) translateY(-0.25em);
89  }
90  40% {
91    transform: translateX(1.5em) translateY(-0.5em); /* Highest Point */
92  }
93  60% {
94    transform: translateX(1em) translateY(-0.75em);
95  }
96  80% {
97    transform: translateX(0.5em) translateY(-0.5em);
98  }
99  100% {
100    transform: translateX(0) translateY(0);
101  }
102}
103
104.switch input:checked + .slider:before {
105  animation: slideRight 0.15s forwards;
106}
107
108.switch input:not(:checked) + .slider:before {
109  animation: slideLeft 0.15s forwards;
110}
111