<div class="arrow">
  <div class="arrow-top"></div>
  <div class="arrow-bottom"></div>
</div>
body {
  background-color: #111;
}

.arrow {
  cursor: pointer;
  height: 120px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: transform .1s;
  width: 80px;
  
  $transition-time: .15s;
  
  &-top,
  &-bottom {
    background-color: #666;
    height: 4px;
    left: -5px;
    position: absolute;
    top: 50%;
    width: 100%;
    
    &:after {
      background-color: #fff;
      content: '';
      height: 100%;
      position: absolute;
      top: 0;
      transition: all $transition-time;
    }
  }
  
  &-top {
    transform: rotate(45deg);
    transform-origin: bottom right;
    
    &:after {
      left: 100%;
      right: 0;
      transition-delay: 0s;
    }
  }
  
  &-bottom {
    transform: rotate(-45deg);
    transform-origin: top right;
    
    &:after {
      left: 0;
      right: 100%;
      transition-delay: $transition-time;
    }
  }
  
  &:hover & {
    
    &-top:after {
      left: 0;
      transition-delay: $transition-time;
    }

    &-bottom:after {
      right: 0;
      transition-delay: 0s;
    }
  }
  
  &:active {
    transform: translateX(-50%) translateY(-50%) scale(0.9);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.