CodePen

HTML

            
              
<a class="top"href="#">Top</a>


<a class="left" href="#">Left</a>
      

<a class="right" href="#">Right</a>
            
          
!
via HTML Inspector

CSS

            
              body {
  padding:100px;
  font-size:25px;
}

a {
  text-decoration: none;
  color:black;
  display:block;
  width:3em;
  text-align:center;
  background:lightgrey;
  position:relative;
  margin:0 50px 5px 0;
  border:1px solid grey;
  transition:all 0.5s ease;
}

a:before {
  position:absolute;
  width:inherit;

}

a.top:before {
  content:"\2191";
  top:-1.5em;
  left:0;
}

a.top:hover {
  top:-15px;
}

a.left:before {
  position:absolute;
  content:"\2190";
  left:-2.5em;
  width:inherit;
}

a.left:hover {
 left:-15px;
}

a.right:before {
  content:"\2192";
  right:-2.5em;
}

a.right:hover {
  right:-15px;
}
  


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................