1button {
2 position: relative;
3 height: 50px;
4 padding: 0 30px;
5 border: 2px solid #000;
6 background: #e8e8e8;
7 user-select: none;
8 white-space: nowrap;
9 transition: all .05s linear;
10 font-family: inherit;
11}
12
13button:before, button:after {
14 content: "";
15 position: absolute;
16 background: #e8e8e8;
17 transition: all .2s linear;
18}
19
20button:before {
21 width: calc(100% + 6px);
22 height: calc(100% - 16px);
23 top: 8px;
24 left: -3px;
25}
26
27button:after {
28 width: calc(100% - 16px);
29 height: calc(100% + 6px);
30 top: -3px;
31 left: 8px;
32}
33
34button:hover {
35 cursor: crosshair;
36}
37
38button:active {
39 transform: scale(0.95);
40}
41
42button:hover:before {
43 height: calc(100% - 32px);
44 top: 16px;
45}
46
47button:hover:after {
48 width: calc(100% - 32px);
49 left: 16px;
50}
51
52button span {
53 font-size: 15px;
54 z-index: 3;
55 position: relative;
56 font-weight: 600;
57}