A CodePen by Devon Noel de Tilly. Scrolling Prev/Next Nav Buttons - Buttons for blog posts or articles to navigate to previous or next post. Hovering over them causes them to expand to show 'PREV' and 'NEXT'.

index.html

<nav class="prev-next-buttons">
  <a href="#" class="prev-button">Prev</a>
  <a href="#" class="next-button">Next</a>
</nav>

style.css

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,600italic,300,600);

body {
  background-color: #1b1b1b;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  font-family: 'Open Sans', Sans-Serif;
}

nav.prev-next-buttons {
  position: fixed;
  top: 40%;
  width: 100%;
}

a {
  text-decoration: none;
  color: #EEE6BC;
  background-color: #586C10;
  min-width: 100px;
  padding: 15px;
  text-transform:uppercase;
}

a.prev-button {
  transition:left 0.3s;
  -webkit-transition:left 0.3s;
  -moz-transition: left 0.3s;
  left: -100px;
  position: absolute;
  text-align: left;
}

a.prev-button:hover {
  left: 0px;
}

a.prev-button:after {
  font-family: 'FontAwesome';
  position: absolute;
  right: 10px;
  content: '\f053';
  font-size: 24px;
  top: 13px;
}

a.next-button {
  transition:right 0.3s;
  -webkit-transition:right 0.3s;
  -moz-transition: right 0.3s;
  right: -100px;
  position: absolute;
  text-align: right;
}

a.next-button:hover {
  right: 0px;
}

a.next-button:before {
  font-family: 'FontAwesome';
  position: absolute;
  left: 10px;
  content: '\f054';
  font-size: 24px;
  top: 13px;
}