1button {
2  z-index: 2;
3  display: block;
4  width: fit-content;
5  height: auto;
6  outline: none;
7  border: none;
8  background-color: inherit;
9  font-size: 24px;
10  font-weight: bold;
11  padding: 10px 20px;
12  position: relative;
13  cursor: pointer;
14}
15
16button::before {
17  content: "";
18  display: block;
19  width: 100%;
20  height: 100%;
21  z-index: 3;
22  position: absolute;
23  top: 0%;
24  left: 0%;
25  transform: scaleX(0.2) scaleY(0.5) translate(250%, 100%);
26  border-top: solid 2px #333;
27  border-left: solid 4px #333;
28  transition: all .4s ease-in-out;
29}
30
31button::after {
32  content: "";
33  display: block;
34  width: 100%;
35  height: 100%;
36  z-index: 3;
37  position: absolute;
38  top: 0;
39  left: 0;
40  transform: translate(-50%, -50%) scaleX(0.2) scaleY(0.5);
41  border-bottom: solid 2px #333;
42  border-right: solid 4px #333;
43  transition: all .4s ease-in-out;
44}
45
46button:hover::before {
47  transform: translate(0%, 0%) scaleX(1) scaleY(1);
48  border-top: solid 1px #333;
49  border-left: solid 1px #333;
50}
51
52button:hover::after {
53  transform: scaleX(1) scaleY(1) translate(0%, 0%);
54  border-bottom: solid 1px #333;
55  border-right: solid 1px #333;
56}