Button by Voxybuns

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  display: block;
15  box-sizing: border-box;
16  border: 2px solid var(--button_outline_color);
17  border-radius: var(--button_radius);
18  padding: 0.75em 1.5em;
19  background: var(--button_color);
20  color: var(--button_outline_color);
21  transform: translateY(-0.2em);
22  transition: transform 0.1s ease;
23}
24
25button:hover .button_top {
26  /* Pull the button upwards when hovered */
27  transform: translateY(-0.33em);
28}
29
30button:active .button_top {
31  /* Push the button downwards when pressed */
32  transform: translateY(0);
33}