Switch by mrjamestab

1.container {
2  margin: auto;
3  color: hsl(0, 0%, 30%);
4  font-weight: 900;
5  font-size: 5rem;
6  display: flex;
7}
8
9.toggle {
10  width: 60px;
11  height: 130px;
12  background-color: hsl(0, 0%, 80%);
13  border-radius: 1.7rem;
14  padding: .25rem 0;
15  cursor: pointer;
16  display: flex;
17  justify-content: center;
18  transition: background-color 300ms 300ms;
19}
20
21.toggle__circle {
22  width: 50px;
23  height: 50px;
24  background-color: hsl(0, 0%, 95%);
25  border-radius: 50%;
26  margin-top: calc(130px - (.25rem * 2) - 50px);
27  transition: margin 500ms ease-in-out;
28}
29
30.toggle-text {
31  display: flex;
32  flex-direction: column;
33  line-height: .8;
34}
35
36#check:checked + .toggle > .toggle__circle {
37  margin-top: 0;
38}
39
40#check:checked + .toggle {
41  background-color: #41a63c;
42}
43
44:not(#check:checked) + .toggle {
45  background-color: #f44336;
46}