Button by milegelu

1.button {
2  --bezier: cubic-bezier(0.22, 0.61, 0.36, 1);
3  --edge-light: hsla(0, 0%, 50%, 0.8);
4  --text-light: rgba(255, 255, 255, 0.4);
5  --back-color: 240, 40%;
6
7  cursor: pointer;
8  padding: 0.7em 1em;
9  border-radius: 0.5em;
10  min-height: 2.4em;
11  min-width: 3em;
12  display: flex;
13  align-items: center;
14  gap: 0.5em;
15
16  font-size: 18px;
17  letter-spacing: 0.05em;
18  line-height: 1;
19  font-weight: bold;
20
21  background: linear-gradient(
22    140deg,
23    hsla(var(--back-color), 50%, 1) min(2em, 20%),
24    hsla(var(--back-color), 50%, 0.6) min(8em, 100%)
25  );
26  color: hsla(0, 0%, 90%);
27  border: 0;
28  box-shadow: inset 0.4px 1px 4px var(--edge-light);
29
30  transition: all 0.1s var(--bezier);
31}
32
33.button:hover {
34  --edge-light: hsla(0, 0%, 50%, 1);
35  text-shadow: 0px 0px 10px var(--text-light);
36  box-shadow: inset 0.4px 1px 4px var(--edge-light),
37    2px 4px 8px hsla(0, 0%, 0%, 0.295);
38  transform: scale(1.1);
39}
40
41.button:active {
42  --text-light: rgba(255, 255, 255, 1);
43
44  background: linear-gradient(
45    140deg,
46    hsla(var(--back-color), 50%, 1) min(2em, 20%),
47    hsla(var(--back-color), 50%, 0.6) min(8em, 100%)
48  );
49  box-shadow: inset 0.4px 1px 8px var(--edge-light),
50    0px 0px 8px hsla(var(--back-color), 50%, 0.6);
51  text-shadow: 0px 0px 20px var(--text-light);
52  color: hsla(0, 0%, 100%, 1);
53  letter-spacing: 0.1em;
54  transform: scale(1);
55}
56