1button {
2 position: relative;
3 border: none;
4 background: transparent;
5 padding: 0;
6 cursor: pointer;
7 outline-offset: 4px;
8 transition: filter 250ms;
9 user-select: none;
10 touch-action: manipulation;
11}
12
13.shadow {
14 position: absolute;
15 top: 0;
16 left: 0;
17 width: 100%;
18 height: 100%;
19 border-radius: 12px;
20 background: hsl(0deg 0% 0% / 0.25);
21 will-change: transform;
22 transform: translateY(2px);
23 transition: transform
24    600ms
25    cubic-bezier(.3, .7, .4, 1);
26}
27
28.edge {
29 position: absolute;
30 top: 0;
31 left: 0;
32 width: 100%;
33 height: 100%;
34 border-radius: 12px;
35 background: linear-gradient(
36    to left,
37    hsl(340deg 100% 16%) 0%,
38    hsl(340deg 100% 32%) 8%,
39    hsl(340deg 100% 32%) 92%,
40    hsl(340deg 100% 16%) 100%
41  );
42}
43
44.front {
45 display: block;
46 position: relative;
47 padding: 12px 27px;
48 border-radius: 12px;
49 font-size: 1.1rem;
50 color: white;
51 background: hsl(345deg 100% 47%);
52 will-change: transform;
53 transform: translateY(-4px);
54 transition: transform
55    600ms
56    cubic-bezier(.3, .7, .4, 1);
57}
58
59button:hover {
60 filter: brightness(110%);
61}
62
63button:hover .front {
64 transform: translateY(-6px);
65 transition: transform
66    250ms
67    cubic-bezier(.3, .7, .4, 1.5);
68}
69
70button:active .front {
71 transform: translateY(-2px);
72 transition: transform 34ms;
73}
74
75button:hover .shadow {
76 transform: translateY(4px);
77 transition: transform
78    250ms
79    cubic-bezier(.3, .7, .4, 1.5);
80}
81
82button:active .shadow {
83 transform: translateY(1px);
84 transition: transform 34ms;
85}
86
87button:focus:not(:focus-visible) {
88 outline: none;
89}