1button {
2  --sunGradient: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);
3  --moonGradient: linear-gradient(to top, #cc208e 0%, #6713d2 100%);
4  display: flex;
5  justify-content: center;
6  align-items: center;
7  position: relative;
8  width: 140px;
9  height: 60px;
10  color: white;
11  font-size: 1em;
12  font-weight: bold;
13  text-transform: uppercase;
14  border-radius: 15px;
15  background-color: transparent;
16  transition: 0.5s;
17  overflow: hidden;
18  border: 4px solid black;
19}
20
21button:hover {
22  box-shadow: -15px -15px 500px white;
23  transition: 0.2s;
24}
25
26button:hover span {
27  background: var(--sunGradient);
28}
29
30.state {
31  position: absolute;
32  display: flex;
33  justify-content: center;
34  align-items: center;
35  border-radius: inherit;
36  transition: 0.4s;
37  width: 85%;
38  height: 82%;
39  border: 4px solid black;
40}
41
42#sun {
43  display: none;
44  background-color: #212121;
45  opacity: 0.85;
46}
47
48#moon {
49  background-color: #212121;
50  opacity: 0.85;
51}
52
53button:hover #sun {
54  display: flex;
55}
56
57button:hover #moon {
58  display: none;
59}
60
61button:hover .lightRotation {
62  animation: 1s linear reverse infinite rotation413;
63}
64
65button:hover .lightRotation2 {
66  animation: 2s linear infinite rotation_413;
67}
68
69button:hover .lightRotation3 {
70  animation: 10s linear reverse infinite rotation_413;
71}
72
73button:hover .lightRotation4 {
74  animation: 3s linear infinite rotation_413;
75}
76
77.lightRotation {
78  position: absolute;
79  transition: 0.4s;
80  z-index: -1;
81  width: 60px;
82  height: 500px;
83  transform: rotate(50deg);
84  border-radius: inherit;
85  background: var(--moonGradient);
86}
87
88.lightRotation2 {
89  position: absolute;
90  transition: 0.4s;
91  z-index: -1;
92  width: 75px;
93  height: 500px;
94  transform: rotate(110deg);
95  border-radius: inherit;
96  background: var(--moonGradient);
97}
98
99.lightRotation3 {
100  position: absolute;
101  transition: 0.4s;
102  z-index: -1;
103  width: 40px;
104  height: 260px;
105  border-radius: inherit;
106  background: var(--moonGradient);
107}
108
109.lightRotation4 {
110  position: absolute;
111  transition: 0.4s;
112  z-index: -1;
113  width: 24px;
114  height: 220px;
115  transform: rotate(100deg);
116  border-radius: inherit;
117  background: var(--moonGradient);
118}
119
120@keyframes rotation_413 {
121  from {
122    transform: rotate(0deg)
123  }
124
125  to {
126    transform: rotate(360deg)
127  }
128}
129