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