1button {
2 --hover-shadows: 16px 16px 33px #121212,
3                   -16px -16px 33px #303030;
4 --accent: fuchsia;
5 font-weight: bold;
6 letter-spacing: 0.1em;
7 border: none;
8 border-radius: 1.1em;
9 background-color: #212121;
10 color: white;
11 padding: 1em 2em;
12 transition: box-shadow ease-in-out 0.3s,
13             background-color ease-in-out 0.1s,
14             letter-spacing ease-in-out 0.1s,
15             transform ease-in-out 0.1s;
16 box-shadow: 13px 13px 10px #1c1c1c,
17             -13px -13px 10px #262626;
18}
19
20button:hover {
21 box-shadow: var(--hover-shadows);
22}
23
24button:active {
25 box-shadow: var(--hover-shadows),
26              var(--accent) 0px 0px 30px 5px;
27 background-color: var(--accent);
28 transform: scale(0.95);
29}
30