1.arrow {
2  cursor: pointer;
3  height: 60px;
4  left: 50%;
5  position: absolute;
6  top: 50%;
7  transform: translateX(-50%) translateY(-50%);
8  transition: transform 0.1s;
9  width: 50px;
10}
11
12.arrow-top, .arrow-bottom {
13  background-color: #666;
14  height: 4px;
15  left: -5px;
16  position: absolute;
17  top: 50%;
18  width: 100%;
19}
20
21.arrow-top:after, .arrow-bottom:after {
22  background-color: #fff;
23  content: "";
24  height: 100%;
25  position: absolute;
26  top: 0;
27  transition: all 0.15s;
28}
29
30.arrow-top {
31  transform: rotate(45deg);
32  transform-origin: bottom right;
33}
34
35.arrow-top:after {
36  left: 100%;
37  right: 0;
38  transition-delay: 0s;
39}
40
41.arrow-bottom {
42  transform: rotate(-45deg);
43  transform-origin: top right;
44}
45
46.arrow-bottom:after {
47  left: 0;
48  right: 100%;
49  transition-delay: 0.15s;
50}
51
52.arrow:hover .arrow-top:after {
53  left: 0;
54  transition-delay: 0.15s;
55}
56
57.arrow:hover .arrow-bottom:after {
58  right: 0;
59  transition-delay: 0s;
60}
61
62.arrow:active {
63  transform: translateX(-50%) translateY(-50%) scale(0.9);
64}