<div class="wrapper">
<div>
<a href="#" class="prev" rel="prev">&lt; Previous</a>
<a href="#" class="next" rel="next">Next &gt;</a>
</div>
</div>

@import "compass/css3";

$red : #cd5c4d;
$darkgrey: #292b30;

html,body {
  height:100%;
}

body {
  vertical-align:middle;
  width:100%;
  text-align:center;
}

.wrapper {
  margin: 0 auto;
  display:table;
}

div {
  display:table-cell;
  vertical-align:middle;
  height:100%;
  margin:0 auto;
}

.prev, .next {
  /* only modern browser */
  &:not(:nth-child(1n+3)) {
    font-size:2em;
    @include inline-block;
    text-indent:-9999px;
    width:5em;
    height:5em;
    position:relative;
    overflow:hidden;
    
    &:before,
    &:after {
      @include transition(background-color .2s ease-out);
      content:"";
      position:absolute;
      left:25%;
      right:25%;
      height:1px;
      background-color:$red;
      top:50%;
    }
      
    &:hover {
      &:before,
      &:after {
        background-color:$darkgrey;
      }
    }
    
  }
}

.prev:not(:nth-child(1n+3)) {
  &:after {
    @include transform-origin(0,0);
    @include rotate(-45deg);
  }
  
  &:before {
    @include transform-origin(0,100%);
    @include rotate(45deg);
  }
}

.next:not(:nth-child(1n+3)) {
  
  &:after {
    @include transform-origin(100%,100%);
    @include rotate(-45deg);
  }
  
  &:before {
    @include transform-origin(100%,0);
    @include rotate(45deg);
  }
}