title: Adding buttons to header using css
body: <p>I want to add button to following header. It should have layout like</p>
  
  <p><a href="http://www.fullstopinteractive.com/" rel="nofollow noreferrer">http://www.fullstopinteractive.com/</a></p>
  
  <p><strong>Header CSS:</strong></p>
  
  <pre><code>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&gt;div#header {
          position:fixed;
      }
  
      body&gt;div#footer {
          position:fixed;
      }
  }
  
  * html body {
      overflow:hidden;
  }
  
  * html div#content {
      height:100%;
      overflow:auto;
  }
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#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);
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code> &lt;div id="header"&gt;  
    &lt;ul id="nav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;KPI&lt;/a&gt;&lt;/li&gt;  
    &lt;/ul&gt; &lt;/div&gt;
  </code></pre>
  
  <p>But the button are not appearing as in website. How to achieve this?
  <img src="https://i.stack.imgur.com/Msfg8.png" alt="enter image description here"></p>
  
  <p><strong>Chrome</strong>:</p>
  
  <p><img src="https://i.stack.imgur.com/DTZbF.png" alt="enter image description here"></p>