1.switch {
2  font-size: 17px;
3  position: relative;
4  display: inline-block;
5  width: 64px;
6  height: 34px;
7}
8
9.switch input {
10  opacity: 0;
11  width: 0;
12  height: 0;
13}
14
15.slider {
16  position: absolute;
17  cursor: pointer;
18  top: 0;
19  left: 0;
20  right: 0;
21  bottom: 0;
22  background-color: #73C0FC;
23  transition: .4s;
24  border-radius: 30px;
25}
26
27.slider:before {
28  position: absolute;
29  content: "";
30  height: 30px;
31  width: 30px;
32  border-radius: 20px;
33  left: 2px;
34  bottom: 2px;
35  z-index: 2;
36  background-color: #e8e8e8;
37  transition: .4s;
38}
39
40.sun svg {
41  position: absolute;
42  top: 6px;
43  left: 36px;
44  z-index: 1;
45  width: 24px;
46  height: 24px;
47}
48
49.moon svg {
50  fill: #73C0FC;
51  position: absolute;
52  top: 5px;
53  left: 5px;
54  z-index: 1;
55  width: 24px;
56  height: 24px;
57}
58
59/* .switch:hover */.sun svg {
60  animation: rotate 15s linear infinite;
61}
62
63@keyframes rotate {
64 
65  0% {
66    transform: rotate(0);
67  }
68
69  100% {
70    transform: rotate(360deg);
71  }
72}
73
74/* .switch:hover */.moon svg {
75  animation: tilt 5s linear infinite;
76}
77
78@keyframes tilt {
79 
80  0% {
81    transform: rotate(0deg);
82  }
83
84  25% {
85    transform: rotate(-10deg);
86  }
87
88  75% {
89    transform: rotate(10deg);
90  }
91
92  100% {
93    transform: rotate(0deg);
94  }
95}
96
97.input:checked + .slider {
98  background-color: #183153;
99}
100
101.input:focus + .slider {
102  box-shadow: 0 0 1px #183153;
103}
104
105.input:checked + .slider:before {
106  transform: translateX(30px);
107}