Tengo 4 botones en un encabezado div. Los he colocado todos usando los márgenes superior e izquierdo en css para que estén todos juntos en una línea. Nada sofisticado.

Ahora estoy tratando de hacer una acción cuando se presiona el botón, el texto del botón se mueve un poco hacia abajo.

Estoy usando este código en CSS:

    #btnhome:active{
    line-height : 25px;
}

HTML:

<div id="header">           
        <button id="btnhome">Home</button>          
        <button id="btnabout">About</button>
        <button id="btncontact">Contact</button>
        <button id="btnsup">Help Us</button>           
        </div>

Botón de ejemplo de CSS:

#btnhome {  
    margin-left: 121px;
    margin-top: 1px;
    width: 84px;
    height: 45px;   
    background: transparent;
    border: none;
    color: white;   
    font-size:14px;
    font-weight:700;
}

Además, esos botones funcionan en un fondo de encabezado, estoy seguro de que tiene algo que ver con esta configuración:

#header {
    background-image: url(images/navbar588.png);
    height: 48px;
    width: 588px;
    margin: 2em auto;   
    }

Funciona bien, pero el único problema es que todos los otros botones también mueven su texto hacia abajo. ¿Porqué es eso? ¿No estoy aclarando claramente que solo quiero usar #btnhome? Todos los botones tienen identificaciones completamente diferentes. Todos los botones tienen la misma configuración de CSS, excepto los márgenes. ¿Qué necesito para editar?

Muchas gracias.