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}