1.box {
2  width: 140px;
3  height: auto;
4  float: left;
5  transition: .5s linear;
6  position: relative;
7  display: block;
8  overflow: hidden;
9  padding: 15px;
10  text-align: center;
11  margin: 0 5px;
12  background: transparent;
13  text-transform: uppercase;
14  font-weight: 900;
15}
16
17.box:before {
18  position: absolute;
19  content: '';
20  left: 0;
21  bottom: 0;
22  height: 4px;
23  width: 100%;
24  border-bottom: 4px solid transparent;
25  border-left: 4px solid transparent;
26  box-sizing: border-box;
27  transform: translateX(100%);
28}
29
30.box:after {
31  position: absolute;
32  content: '';
33  top: 0;
34  left: 0;
35  width: 100%;
36  height: 4px;
37  border-top: 4px solid transparent;
38  border-right: 4px solid transparent;
39  box-sizing: border-box;
40  transform: translateX(-100%);
41}
42
43.box:hover {
44  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
45}
46
47.box:hover:before {
48  border-color: #262626;
49  height: 100%;
50  transform: translateX(0);
51  transition: .3s transform linear, .3s height linear .3s;
52}
53
54.box:hover:after {
55  border-color: #262626;
56  height: 100%;
57  transform: translateX(0);
58  transition: .3s transform linear, .3s height linear .5s;
59}
60
61button {
62  color: black;
63  text-decoration: none;
64  cursor: pointer;
65  outline: none;
66  border: none;
67  background: transparent;
68}