A CodePen by Franklin Gitonga.

index.html

<ul class="projectNavigation">
    <li>
        <a id="leftButton" href="#">
        <div style="">
     <!--?xml version="1.0" encoding="utf-8" ?-->
        <svg version="1.1"><g transform="rotate(-90 32 32)"><rect x="32" y="26" width="1" height="1" fill="#ffffff"></rect><rect x="31" y="27" width="3" height="1" fill="#ffffff"></rect><rect x="30" y="28" width="5" height="1" fill="#ffffff"></rect><rect x="29" y="29" width="7" height="1" fill="#ffffff"></rect><rect x="32" y="30" width="1" height="1" fill="#ffffff"></rect><rect x="32" y="31" width="1" height="1" fill="#ffffff"></rect><rect x="32" y="33" width="1" height="1" fill="#ffffff"></rect><rect x="32" y="35" width="1" height="1" fill="#ffffff"></rect><rect x="32" y="37" width="1" height="1" fill="#ffffff"></rect></g></svg></div>
</a></li>
  <li><a id="topButton" href="#"><div ><!--?xml version="1.0" encoding="utf-8" ?--><svg version="1.1"><g transform="rotate(0 32 32)"><rect x="32" y="26" width="1" height="1" fill="#ffffff"></rect><rect x="31" y="27" width="3" height="1" fill="#ffffff"></rect><rect x="30" y="28" width="5" height="1" fill="#ffffff"></rect><rect x="29" y="29" width="7" height="1" fill="#ffffff"></rect><rect x="32" y="30" width="1" height="1" fill="#ffffff"></rect><rect x="32" y="31" width="1" height="1" fill="#ffffff"></rect><rect x="32" y="33" width="1" height="1" fill="#ffffff"></rect><rect x="32" y="35" width="1" height="1" fill="#ffffff"></rect><rect x="32" y="37" width="1" height="1" fill="#ffffff"></rect></g></svg></div></a></li>
<li>
    <a id="rightButton" href="#"><div><!--?xml version="1.0" encoding="utf-8" ?--><svg version="1.1"><g transform="rotate(90 32 32)"><rect x="32" y="26" width="1" height="1" fill="#ffffff"></rect><rect x="31" y="27" width="3" height="1" fill="#ffffff"></rect><rect x="30" y="28" width="5" height="1" fill="#ffffff"></rect><rect x="29" y="29" width="7" height="1" fill="#ffffff"></rect><rect x="32" y="30" width="1" height="1" fill="#ffffff"></rect><rect x="32" y="31" width="1" height="1" fill="#ffffff"></rect><rect x="32" y="33" width="1" height="1" fill="#ffffff"></rect><rect x="32" y="35" width="1" height="1" fill="#ffffff"></rect><rect x="32" y="37" width="1" height="1" fill="#ffffff"></rect></g></svg>
    
    </div>
    
    </a>
  
  </li>

</ul>

style.scss

@import "compass";
ul {
  position: relative;
  height: 130px;
  left: 50%;
  list-style:none;
  }

li a {
  position: absolute;
  width: 63px;
  height: 63px;
  background-repeat: no-repeat;
  background-position: 10px 0px;
  background-color: #2bb0a8;
  overflow: hidden;
  -webkit-transform: translate3d(0, 0, 0); //fix chrome flash before animation
  }

li #leftButton {
  left: -103px;
  &:hover div {
    -webkit-animation: leftmove .2s 2; 
     }
  }

li #topButton {
  left: -31px;
  &:hover div {
    -webkit-animation: upmove .2s 2; 
     }
  }

li #rightButton {
  left: 40px;
  &:hover div {
    -webkit-animation: rightmove .2s 2; 
     }
  }


@-webkit-keyframes leftmove {

    0% {
         
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
  
   25% {
        -webkit-transform: matrix(1, 0, 0, 1, 30, 0);
    }
  
   50% {
       -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
    
  75% {
       -webkit-transform: matrix(1, 0, 0, 1, -30, 0);
    }
  
  100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

@-webkit-keyframes upmove {

    0% {
         
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
  
   25% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 30);
    }
  
   50% {
       -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
    
  75% {
       -webkit-transform: matrix(1, 0, 0, 1, 0, -30);
    }
  
  100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
}



@-webkit-keyframes rightmove {

    0% {
         
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
  
   25% {
        -webkit-transform: matrix(1, 0, 0, 1, -30, 0);
    }
  
   50% {
       -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
    
  75% {
       -webkit-transform: matrix(1, 0, 0, 1, 30, 0);
    }
  
  100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    }
}