Sliding Buttons

index.html

<a href="http://www.example.co.uk">
  <div id="btn1" class="button">
    <h1>HOME</h1>
  </div>
</a>

<a href="http://www.example.co.uk">
  <div id="btn2" class="button">
    <h1>TUTORIALS</h1>
  </div>
</a>

<a href="http://www.example.co.uk">
  <div id="btn3" class="button">
    <h1>ABOUT</h1>
  </div>
</a>

sliding-buttons.markdown

Sliding Buttons

A Pen by Matthew Fryer on CodePen.

License.

style.css

body {
  background-color: #e74c3c;
}

h1 {
  font-family: verdana, sans-serif;
  font-weight: bold;
  text-align: center;
  position: relative;
  top: -10px;
}

a {
  text-decoration: none;
}

#btn1 {
  top: 100px;
}

#btn2 {
  top: 200px;
}

#btn3 {
  top: 300px;
}

div.button {
  background-color: #ffffff;
  color: #2c3e50;
  border: none;
  border-radius: 30px;
  width: 500px;
  height: 60px;
  position: fixed;
  left: -435px;
  transition: .7s ease;
}

div.button:hover {
  background-color: #ffffff;
  position: fixed;
  left: -50px;
  width: 600px;
  border-radius: 0px;
  box-shadow: 0px 5px 0px #c0392b;
}

div.button:active {
  background-color: #2c3e50;
  transition: 0s;
  color: #ecf0f1;
}