Switch by K43PT

1.container {
2  width: 7em;
3  height: 7em;
4  position: relative;
5}
6
7.button {
8  position: absolute;
9  width: 100%;
10  height: 100%;
11  border-radius: 50%;
12  border: 4px solid #090909;
13  background-color: transparent;
14  background-image: linear-gradient(145deg, #171717, #444245);
15  box-sizing: border-box;
16  box-shadow: inset 2px 2px 0 #7d7c7e, inset -2px -2px 0px #1c1c1c;
17  display: flex;
18  align-items: center;
19  justify-content: center;
20}
21
22.container input {
23  display: none;
24}
25
26.button::before {
27  position: absolute;
28  content: "";
29  width: 7.25em;
30  height: 7.25em;
31  border-radius: inherit;
32  background-color: transparent;
33  background-image: linear-gradient(145deg, #262626, #606060);
34  z-index: -1;
35  box-shadow: 11px 11px 22px #141414, -11px -11px 22px #525252;
36}
37
38.button .icon {
39  width: 60px;
40  height: 60px;
41  display: inline-block;
42}
43
44.button .icon svg {
45  height: 100%;
46  width: 100%;
47  fill: #a5a5a5;
48}
49
50.container input:checked + .button {
51  box-shadow: inset -2px -2px 0 #5e5e5e, inset 2px 2px 0 #1c1c1c;
52  border: 4px solid rgba(77, 124, 255, 0.281);
53  animation: animeBorder 0.3s linear alternate-reverse infinite;
54}
55
56.container input:checked + .button .icon svg {
57  fill: rgb(77, 124, 255);
58  animation: animeFill 0.3s linear alternate-reverse infinite;
59}
60
61@keyframes animeFill {
62  to {
63    fill: rgba(77, 124, 255, 0.642);
64  }
65}
66
67@keyframes animeBorder {
68  to {
69    border-color: rgba(77, 124, 255, 0.137);
70  }
71}
72