Button by ArturCodeCraft

1/* <reset-style> ============================ */
2button {
3  border: none;
4  background: none;
5  padding: 0;
6  margin: 0;
7  cursor: pointer;
8  font-family: inherit;
9}
10/* ============================ */
11/* <style for bg> ======== */
12.background {
13  border-radius: 16px;
14  border: 1px solid #1a1a1a;
15  background: rgba(74, 74, 74, 0.39);
16  mix-blend-mode: luminosity;
17  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.20);
18  backdrop-filter: blur(15px);
19  width: 65px;
20  height: 65px;
21  display: flex;
22  justify-content: center;
23  align-items: center;
24}
25
26/* <style for change-theme__icon> ======== */
27.change-theme__icon {
28  width: 32px;
29  height: 32px;
30  display: flex;
31  justify-content: center;
32  align-items: center;
33  position: relative;
34  overflow: hidden;
35}
36
37/* .icon-sun-moon */
38.change-theme__icon .icon-sun-moon {
39  width: 11.5px;
40  height: 11.5px;
41  border-radius: 100%;
42  background-color: rgb(28, 28, 30);
43  animation: ease reverse-change-theme .6s forwards;
44  transition: background-color .4s;
45  z-index: 10;
46}
47
48.change-theme__icon:hover .icon-sun-moon {
49  animation: change-theme .4s forwards;
50  background-color: #fff;
51}
52
53@keyframes change-theme {
54  0% {
55    width: 11.5px;
56    height: 11.5px;
57  }
58
59  100% {
60    width: 20px;
61    height: 20px;
62  }
63}
64
65@keyframes reverse-change-theme {
66  0% {
67    width: 20px;
68    height: 20px;
69  }
70
71  50% {
72    width: 10px;
73    height: 10px;
74  }
75
76  100% {
77    width: 11.5px;
78    height: 11.5px;
79  }
80}
81
82/* .icon-sun-moon:before */
83.change-theme__icon .icon-sun-moon:before {
84  content: '';
85  width: 20px;
86  height: 20px;
87  border-radius: 100%;
88  background-color: rgb(49,49,49);
89  position: absolute;
90  top: 2px;
91  right: -2px;
92  transform: translateX(100%) scale(.2);
93  transition: transform .4s;
94}
95
96.change-theme__icon:hover .icon-sun-moon:before {
97  transform: scale(1);
98  transition: transform .4s .12s;
99}
100
101/* sun-rays */
102.sun-rays {
103  width: 22px;
104  height: 22px;
105  position: absolute;
106}
107
108.sun-rays span {
109  width: 2px;
110  height: 4px;
111  border-radius: 2px;
112  background-color: rgb(28, 28, 30);
113  position: absolute;
114}
115
116/* ray */
117.sun-rays span:nth-child(1) {
118  left: 50%;
119  transform: translateX(-50%);
120}
121
122.sun-rays span:nth-child(2) {
123  bottom: 0;
124  left: 50%;
125  transform: translateX(-50%);
126}
127
128.sun-rays span:nth-child(3) {
129  top: 50%;
130  left: 1px;
131  transform: translateY(-50%) rotate(90deg);
132}
133
134.sun-rays span:nth-child(4) {
135  top: 50%;
136  right: 1px;
137  transform: translateY(-50%) rotate(90deg);
138}
139
140.sun-rays span:nth-child(5) {
141  top: 2px;
142  right: 2.5px;
143  transform: rotate(45deg);
144}
145
146.sun-rays span:nth-child(6) {
147  bottom: 2px;
148  left: 2.5px;
149  transform: rotate(45deg);
150}
151
152.sun-rays span:nth-child(7) {
153  top: 2px;
154  left: 2.5px;
155  transform: rotate(-45deg);
156}
157
158.sun-rays span:nth-child(8) {
159  bottom: 2px;
160  right: 2.5px;
161  transform: rotate(-45deg);
162}
163
164.sun-rays {
165  animation: reverse-sun-rays .6s forwards;
166}
167
168.change-theme__icon:hover .sun-rays {
169  animation: ease sun-rays .4s forwards;
170}
171
172@keyframes sun-rays {
173  0% {
174    transform: rotate(0deg);
175  }
176
177  100% {
178    transform: rotate(-45deg);
179    opacity: 0;
180  }
181}
182
183@keyframes reverse-sun-rays {
184  0% {
185    transform: rotate(-45deg);
186  }
187
188  50% {
189    transform: rotate(8deg);
190  }
191
192  100% {
193    transform: rotate(0deg);
194  }
195}