1.toggle-switcher {
2  width: 50px;
3  height: 25px;
4  position: relative;
5  margin: 20px auto;
6  background: #000;
7  border-radius: 50px;
8}
9
10.toggle-input {
11  display: none;
12}
13
14.toggle-label {
15  width: 100%;
16  height: 100%;
17  position: absolute;
18  top: 0;
19  left: 0;
20  border-radius: 50px;
21  cursor: pointer;
22  box-shadow: 0 0 0 0 #ff0000;
23}
24
25.toggle-label::before {
26  content: "";
27  width: 25px;
28  height: 25px;
29  position: absolute;
30  top: 0;
31  left: 0;
32  background: #ffffff;
33  border-radius: 50%;
34  transition: all 0.3s ease;
35}
36
37.toggle-input:checked + .toggle-label {
38  animation: shadow-animation_5020 10s linear infinite;
39}
40
41.toggle-input:checked + .toggle-label::before {
42  transform: translateX(25px);
43}
44
45@keyframes shadow-animation_5020 {
46  0% {
47    box-shadow: 0 0 0 0 #ff0000;
48  }
49
50  50% {
51    box-shadow: 0 0 25px 25px #ffa500;
52  }
53
54  100% {
55    box-shadow: 0 0 0 0 #ff0000;
56  }
57}
58