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/* <main-style> ============================ */
12.theme__icon {
13  width: 32px;
14  height: 32px;
15  padding: 4px;
16  border-radius: 10px;
17  background-color: #5856d6;
18  position: relative;
19  overflow: hidden;
20}
21
22.theme__icon > :nth-child(1) {
23  width: 16px;
24  height: 16px;
25  border-radius: 24px;
26  border: 3px solid #5856d6;
27  background-color: rgb(28, 28, 30);
28  position: absolute;
29  top: 50%;
30  left: 50%;
31  transform: translate(-50%, -50%);
32  transition: width .4s, height .4s, border .4s, background-color .4s;
33  z-index: 10;
34}
35
36.theme__icon:hover > :nth-child(1) {
37  width: 20px;
38  height: 20px;
39  border: 1px solid rgb(245, 245, 247);
40  background-color: rgb(245, 245, 247);
41}
42
43.theme__icon > :nth-child(3) {
44  width: 4px;
45  height: 4px;
46  border-radius: 9px;
47  background-color: #5856d6;
48  position: absolute;
49  top: 2px;
50  right: 2px;
51  transition: width .6s, height .6s;
52  transition-delay: .08s;
53  z-index: 10;
54}
55
56.theme__icon:hover > :nth-child(3) {
57  width: 18px;
58  height: 18px;
59}
60
61.theme__icon > :nth-child(2) {
62  width: 24px;
63  height: 24px;
64  border-radius: 24px;
65  position: absolute;
66  top: 50%;
67  left: 50%;
68  transform: translate(-50%, -50%);
69  transition: transform .4s;
70}
71
72.theme__icon:hover > :nth-child(2) {
73  transform: translate(-50%, -50%) rotate(-45deg) scale(.8);
74}
75
76.theme__icon > :nth-child(2) span {
77  display: block;
78  width: 24px;
79  height: 2px;
80  border-radius: 2px;
81  background-color: rgb(28, 28, 30);
82  position: relative;
83}
84
85.theme__icon > :nth-child(2) > :nth-child(1) {
86  top: calc(50% - 1px);
87}
88
89.theme__icon > :nth-child(2) > :nth-child(2) {
90  top: calc(50% - 3px);
91  transform: rotate(90deg);
92}
93
94.theme__icon > :nth-child(2) > :nth-child(3) {
95  top: calc(50% - 5px);
96  transform: rotate(45deg);
97}
98
99.theme__icon > :nth-child(2) > :nth-child(4) {
100  top: calc(50% - 7px);
101  transform: rotate(-45deg);
102}