Button by adamgiebl

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