Switch by EddyBel

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  transform-style: preserve-3d;
9  perspective: 500px;
10  animation: toggle__animation 3s infinite;
11}
12
13.switch::before {
14  content: "";
15  position: absolute;
16  width: 100%;
17  height: 100%;
18  left: 0;
19  top: 0;
20  filter: blur(20px);
21  z-index: -1;
22  border-radius: 50px;
23  background-color: #d8ff99;
24  background-image: radial-gradient(at 21% 46%, hsla(183,65%,60%,1) 0px, transparent 50%),
25radial-gradient(at 23% 25%, hsla(359,74%,70%,1) 0px, transparent 50%),
26radial-gradient(at 20% 1%, hsla(267,83%,75%,1) 0px, transparent 50%),
27radial-gradient(at 86% 87%, hsla(204,69%,68%,1) 0px, transparent 50%),
28radial-gradient(at 99% 41%, hsla(171,72%,77%,1) 0px, transparent 50%),
29radial-gradient(at 55% 24%, hsla(138,60%,62%,1) 0px, transparent 50%);
30}
31
32/* Hide default HTML checkbox */
33.switch input {
34  opacity: 0;
35  width: 0;
36  height: 0;
37}
38
39/* The slider */
40.slider {
41  position: absolute;
42  cursor: pointer;
43  top: 0;
44  left: 0;
45  right: 0;
46  bottom: 0;
47  background-color: #fdfefedc;
48  transition: .4s;
49  border-radius: 30px;
50}
51
52.slider:before {
53  position: absolute;
54  content: "";
55  height: 1.4em;
56  width: 1.4em;
57  left: 0.3em;
58  bottom: 0.35em;
59  transition: .4s;
60  border-radius: 50%;
61  box-shadow: rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
62     rgba(0, 0, 0, 0.09) 0px -1px 15px -8px;
63  background-color: #ff99fd;
64  background-image: radial-gradient(at 81% 39%, hsla(327,79%,79%,1) 0px, transparent 50%),
65  radial-gradient(at 11% 72%, hsla(264,64%,79%,1) 0px, transparent 50%),
66  radial-gradient(at 23% 20%, hsla(75,98%,71%,1) 0px, transparent 50%);
67}
68
69.input__check:checked + .slider {
70  background-color: #17202A;
71}
72
73.input__check:checked + .slider:before {
74  transform: translateX(1.5em);
75}
76
77@keyframes toggle__animation {
78  0%, 100% {
79    transform: translateY(-10px) rotateX(15deg) rotateY(-20deg);
80  }
81
82  50% {
83    transform: translateY(0px) rotateX(15deg) rotateY(-20deg);
84  }
85}