Button by SteveBloX

1button {
2  --button_radius: 0.75em;
3  --button_color: #e8e8e8;
4  --button_outline_color: #000000;
5  --shadow-color: rgba(0, 0, 0, 0.2);
6  --highlight-color: rgba(255, 255, 255, 0.2);
7  font-size: 17px;
8  font-weight: bold;
9  border: none;
10  border-radius: var(--button_radius);
11  background: linear-gradient(
12    to bottom right,
13    var(--highlight-color),
14    var(--shadow-color)
15  );
16  box-shadow: 6px 6px 16px var(--shadow-color),
17    -6px -6px 16px var(--highlight-color);
18  cursor: pointer;
19}
20
21.button_top {
22  display: block;
23  box-sizing: border-box;
24  border: 2px solid var(--button_outline_color);
25  border-radius: var(--button_radius);
26  padding: 0.75em 1.5em;
27  background: var(--button_color);
28  color: var(--button_outline_color);
29  transform: translateY(-0.2em);
30  transition: transform 0.1s ease;
31}
32
33button:hover .button_top {
34  transform: translateY(-0.33em);
35}
36
37button:active .button_top {
38  transform: translateY(0);
39}