Adding buttons to header using css

I want to add button to following header. It should have layout like

http://www.fullstopinteractive.com/

Header CSS:

body {
     margin:0;
     padding:100px 0 50px 0;
 }
 
 div#header {
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:30px;
     background-color: #800080;
 }
 
 div#footer {
     position:absolute;
     bottom:0;
     left:0;
     width:100%;
     height:50px;
     background-color: #800080;
 }
 
  @media screen {
     body>div#header {
         position:fixed;
     }
 
     body>div#footer {
         position:fixed;
     }
 }
 
 * html body {
     overflow:hidden;
 }
 
 * html div#content {
     height:100%;
     overflow:auto;
 }
 

CSS:

#nav {
     float: right;
     padding: 42px 0 0 30px;
 }
 
 #nav li {
     float: left;
     margin: 0 0 0 5px;
 }
 
 #nav li a {
     padding: 5px 15px;
     font-weight: bold;
     color: #ccc;
     color: rgba(255, 255, 255, 0.7);
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
     -webkit-border-radius: 14px;
     -moz-border-radius: 14px;
     border-radius: 14px;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }
 
 #nav li a:hover, #nav li a:focus {
     color: #fff;
     background: rgba(255, 255, 255, 0.15);
 }
 

HTML:

 <div id="header">  
   <ul id="nav">
   <li><a href="#">HOME</a></li>
   <li><a href="#">KPI</a></li>  
   </ul> </div>
 

But the button are not appearing as in website. How to achieve this?

Chrome:

---