1button {
2    /* Variables */
3  --button_radius: 0.75em;
4  --button_color: #e8e8e8;
5  --button_outline_color: #000000;
6  font-size: 17px;
7  font-weight: bold;
8  border: none;
9  border-radius: var(--button_radius);
10  background: var(--button_outline_color);
11}
12
13.button_top {
14    /* New variables */
15  --gradient-color-1: #8360c3;
16  --gradient-color-2: #2ebf91;
17  display: block;
18  box-sizing: border-box;
19  border: 2px solid var(--button_outline_color);
20  border-radius: var(--button_radius);
21  padding: 0.75em 1.5em;
22  background: linear-gradient(to bottom, var(--gradient-color-1), var(--gradient-color-2));
23  color: var(--button_outline_color);
24  transform: translateY(-0.2em);
25  transition: transform 0.1s ease;
26}
27
28button:hover .button_top {
29    /* Pull the button upwards when hovered */
30  transform: translateY(-0.33em);
31}
32
33button:active .button_top {
34    /* Push the button downwards when pressed */
35  transform: translateY(0);
36}