.barrow {
    cursor: pointer;
    height: 100px;
    left: 0%;
    position: absolute;
    top: 85%;
    transform: translateX(50%) translateY(-50%);
    transition: transform 0.1s;
    width: 30px;
 
}

.barrow-top, .barrow-bottom {
    background-color: #666;
    height: 4px;
    left: -100%;
    position: absolute;
    top: 50%;
    width: 100%;
}
.barrow-top:after, .barrow-bottom:after {
    background-color: #fff;
    content: '';
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.15s;
}

.barrow-top {
    transform: rotate(135deg) translateY(-6px);
    transform-origin: top right;
}
.barrow-top:after {
    left: 100%;
    right: 0;
    transition-delay: 0s;
}
.barrow-bottom {
    transform: rotate(-135deg) translateY(6px);
    transform-origin: bottom right;
}
.barrow-bottom:after {
    left: 0;
    right: 100%;
    transition-delay: 0.15s;
}
.barrow:hover .barrow-top:after {
    left: 0;
    transition-delay: 0.15s;
}
.barrow:hover .barrow-bottom:after {
    right: 0;
    transition-delay: 0s;
}
.barrow:active {
    transform: translateX(50%) translateY(-50%) scale(0.9);
}




.arrow {
    cursor: pointer;
    height: 120px;
    right: 0%;
    position: absolute;
    top: 85%;
    transform: translateX(-50%) translateY(-50%);
    transition: transform 0.1s;
    width: 30px;
    z-index:1;
}

 .arrow-top, .arrow-bottom {
	 background-color: #666;
	 height: 4px;
	 left: -5px;
	 position: absolute;
	 top: 50%;
	 width: 100%;
}
 .arrow-top:after, .arrow-bottom:after {
	 background-color: #fff;
	 content: '';
	 height: 100%;
	 position: absolute;
	 top: 0;
	 transition: all 0.15s;
}




 .arrow-top {
	 transform: rotate(45deg);
	 transform-origin: bottom right;
}
 .arrow-top:after {
	 left: 100%;
	 right: 0;
	 transition-delay: 0s;
}
 .arrow-bottom {
	 transform: rotate(-45deg);
	 transform-origin: top right;
}
 .arrow-bottom:after {
	 left: 0;
	 right: 100%;
	 transition-delay: 0.15s;
}
 .arrow:hover .arrow-top:after {
	 left: 0;
	 transition-delay: 0.15s;
}
 .arrow:hover .arrow-bottom:after {
	 right: 0;
	 transition-delay: 0s;
}
.arrow:active {
	 transform: translateX(-50%) translateY(-50%) scale(0.9);
}