Button by Uncannypotato69

1.button {
2  height: fit-content;
3  width: fit-content;
4  background-color: #ebebeb;
5  border-radius: 1rem;
6  padding: 0.5em;
7  position: relative;
8  z-index: 1;
9  transition: all 200ms;
10  outline: none;
11  border: none;
12  cursor: pointer;
13}
14
15.label {
16  --shadow-color: 0deg 0% 73%;
17  --shadow: 0px 0.3px 0.4px hsl(var(--shadow-color) / 0.21),
18    0.1px 1.7px 2px -0.3px hsl(var(--shadow-color) / 0.23),
19    0.1px 3.1px 3.7px -0.7px hsl(var(--shadow-color) / 0.24),
20    0.2px 5.2px 6.2px -1px hsl(var(--shadow-color) / 0.26),
21    0.3px 8.5px 10.2px -1.3px hsl(var(--shadow-color) / 0.27),
22    0.5px 13.6px 16.3px -1.7px hsl(var(--shadow-color) / 0.29),
23    0.7px 21px 25.2px -2px hsl(var(--shadow-color) / 0.3);
24  --shadow-hover: 0px 0.5px 0.6px hsl(var(--shadow-color) / 0.2),
25    -0.1px 1.6px 1.9px -0.7px hsl(var(--shadow-color) / 0.22),
26    -0.2px 3.7px 4.4px -1.3px hsl(var(--shadow-color) / 0.25);
27
28  height: fit-content;
29  width: fit-content;
30  padding: 3px;
31  background-image: linear-gradient(to bottom, #dddedd, #7a7b7a);
32  border-radius: calc(1rem + 3px);
33  transition: all 300ms;
34  box-shadow: 0px 0px 0px 1px #fff, var(--shadow);
35  color: #161616;
36  cursor: pointer;
37}
38
39.label:has(button:hover) {
40  transform: translate(0px, 4px);
41  box-shadow: 0px 0px 0px 1px #fff, var(--shadow-hover);
42}
43
44.label:has(button:active) {
45  transform: translate(0px, 8px);
46  box-shadow: 0px 0px 0px 1px #fff;
47}
48
49.roundThing {
50  display: flex;
51  justify-content: center;
52  align-items: center;
53  height: fit-content;
54  width: fit-content;
55  gap: 0.5em;
56  padding: 1em;
57  border-radius: 2rem;
58  box-shadow: inset 0px 16px 16px 0px #d8dad8, inset 0px -16px 16px 0px #f4f6f5;
59  overflow: hidden;
60}
61
62.button:hover .roundThing {
63  box-shadow: inset 0px 8px 8px 0px #d8dad8, inset 0px -24px 24px 0px #f4f6f5;
64  transition: all 300ms;
65}
66
67.roundThing p {
68  font-weight: 700;
69  color: #161616;
70  letter-spacing: -0.03rem;
71}
72
73.svg {
74  height: 1.5rem;
75  aspect-ratio: 1/1;
76  transition: transform 300ms;
77}
78
79.button:hover .svg {
80  transform: rotate(45deg);
81  animation: onHover 750ms ease infinite both;
82  animation-delay: 300ms;
83}
84
85.button:active .svg {
86  animation-play-state: paused;
87}
88
89@keyframes onHover {
90  50% {
91    translate: 4px;
92  }
93}
94