1button {
2 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
3 font-size: 17px;
4 padding: 1em 2.7em;
5 font-weight: 500;
6 background: #1F2937;
7 color: white;
8 border: none;
9 position: relative;
10 overflow: hidden;
11 border-radius: 0.6em;
12}
13
14.gradient {
15 position: absolute;
16 width: 100%;
17 height: 100%;
18 left: 0;
19 top: 0;
20 border-radius: 0.6em;
21 margin-top: -0.25em;
22 background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
23}
24
25.label {
26 position: relative;
27 top: -1px;
28}
29
30.transition {
31 transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
32 transition-duration: 500ms;
33 background-color: rgba(16, 185, 129, 0.6);
34 border-radius: 9999px;
35 width: 0;
36 height: 0;
37 position: absolute;
38 left: 50%;
39 top: 50%;
40 transform: translate(-50%, -50%);
41}
42
43button:hover .transition {
44 width: 14em;
45 height: 14em;
46}
47
48button:active {
49 transform: scale(0.97);
50}