Switch by Emil190313

1.toggle {
2  background-color: purple;
3  width: 56px;
4  height: 56px;
5  border-radius: 50%;
6  display: grid;
7  place-items: center;
8  cursor: pointer;
9  box-shadow: 0 0 50px 20px rgba(0, 0, 0, 0.1);
10  line-height: 1;
11}
12
13.input {
14  display: none;
15}
16
17.icon {
18  grid-column: 1 / 1;
19  grid-row: 1 / 1;
20  transition: transform 500ms;
21}
22
23.icon--moon {
24  transition-delay: 200ms;
25  color: black;
26}
27
28.icon--sun {
29  transform: scale(0);
30  color: yellow;
31}
32
33#switch:checked + .icon--moon {
34  transform: rotate(360deg) scale(0);
35}
36
37#switch:checked ~ .icon--sun {
38  transition-delay: 200ms;
39  transform: scale(1) rotate(360deg);
40}
41