title: HTML CSS Button Positioning
body: <p>I have 4 buttons in a header div. I have placed them all using margins top and left in css so they are all next to each other in one line. Nothing fancy.</p>
  
  <p>Now I'm trying to do an action when the button is pressed the button text moves down a little bit.</p>
  
  <p>I'm using this code in CSS :</p>
  
  <pre><code>    #btnhome:active{
      line-height : 25px;
  }
  </code></pre>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div id="header"&gt;           
          &lt;button id="btnhome"&gt;Home&lt;/button&gt;          
          &lt;button id="btnabout"&gt;About&lt;/button&gt;
          &lt;button id="btncontact"&gt;Contact&lt;/button&gt;
          &lt;button id="btnsup"&gt;Help Us&lt;/button&gt;           
          &lt;/div&gt;
  </code></pre>
  
  <p>Button CSS example :</p>
  
  <pre><code>#btnhome {  
      margin-left: 121px;
      margin-top: 1px;
      width: 84px;
      height: 45px;   
      background: transparent;
      border: none;
      color: white;   
      font-size:14px;
      font-weight:700;
  }
  </code></pre>
  
  <p>Also those buttons work on a header background, I'm sure it has something to do with these settings :</p>
  
  <pre><code>#header {
      background-image: url(images/navbar588.png);
      height: 48px;
      width: 588px;
      margin: 2em auto;   
      }
  </code></pre>
  
  <p>It works well but the only problem is that the all other buttons also move their text down? Why Is that? Aren't I clearly clarifying that I want to use #btnhome only? All the buttons have completely different ID's. All buttons have the same CSS settings except the margins. What do I need to edit?</p>
  
  <p>Thank you very much.</p>