Switch by Yaya12085

1.switch input {
2  display: none;
3}
4
5.button {
6  position: relative;
7  background-image: linear-gradient(#ffffff 33%,#414751 58%,#837b52,#c5baa1,#c3adaa);
8  border-radius: 50px;
9  padding: 6px;
10  border: none;
11  outline: none;
12  box-shadow: 0.1em 0 0 #2726267f inset, -0.1em 0 0 #27262600 inset, 0 0.1em 0 #afa490 inset, 0 -0.1em 0 #ffffff3f, 0 0.2em 0.5em #0000007f, 0 -0.1em 0 #151616 inset, -0.1em -0.2em 0 #ffffff7f inset;
13  cursor: pointer;
14  width: 4rem;
15  height: 4rem;
16  -webkit-appearance: none;
17  -moz-appearance: none;
18  appearance: none;
19  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
20  display: flex;
21  align-items: center;
22  justify-content: center;
23  transition: .3s ease-in-out;
24}
25
26.button::before {
27  position: absolute;
28  content: "";
29  width: 4.1rem;
30  height: 4.1rem;
31  border-radius: inherit;
32  background-color: #606060;
33  z-index: -1;
34  transition: background-image .3s ease-in-out;
35}
36
37.button .icon {
38  width: 4rem;
39  height: 4rem;
40  display: inline-block;
41}
42
43.button .icon svg {
44  height: 100%;
45  width: 100%;
46  fill: #000000;
47  transition: fill;
48}
49
50.switch input:checked + .button::before {
51  background-image: rgb(77, 124, 255);
52  animation: anime1 .3s linear alternate-reverse infinite;
53}
54
55.switch input:checked + .button {
56  box-shadow: none;
57}
58
59.switch input:checked + .button .icon svg {
60  fill: rgb(77, 124, 255);
61  animation: anime2 .3s linear alternate-reverse infinite;
62}
63
64@keyframes anime1 {
65  to {
66    background-color: rgb(77, 124, 255);
67  }
68}
69
70@keyframes anime2 {
71  to {
72    fill: rgba(77, 124, 255, 0.642);
73  }
74}