<link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>

    <h1>Simple Menu Navigation</h1>
    
    <a href="#" class="btn">Home</a>
    <a href="#" class="btn">About</a>
    <a href="#" class="btn">Services</a>
    <a href="#" class="btn">Contact</a>
    
    <a href="https://twitter.com/freshcontrast" target="_blank" class="footer">@FRESHCONTRAST</a>

* {
	-webkit-transition-property: all;
	-webkit-transition-duration: .2s;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
	-moz-transition-property: all;
  -moz-transition-timing-function: cubic-bezier(100,50,21,6);
}

body{
  background:#1b1b2b;
  padding:75px;
  text-align:center;
  font-family: 'Oswald', sans-serif;
}

h1{
  color:#c0c0c0;
  font-weight:100;
}

.btn{
  color:#999;
  background:rgba(0, 0, 0, 0.5);
  padding:10px 20px;
  font-size:12px;
  text-decoration:none;
  letter-spacing:2px;
  text-transform:uppercase;
}

.btn:hover{
  border:none;
  background:rgba(0, 0, 0, 0.4);
  background:#fff;
  padding:20px 20px; #000;
  color:#1b1b1b;
}

.footer{
  font-size:8px;
  color:#fff;
  clear:both;
  display:block;
  letter-spacing:5px;
  border:1px solid #fff;
  padding:5px;
  text-decoration:none;
  width:210px;
  margin:auto;
  margin-top:400px;
}