У меня есть 4 кнопки в заголовке div. Я разместил их все, используя поля сверху и слева в CSS, чтобы они все были рядом друг с другом в одной строке. Ничего фантастического.

Теперь я пытаюсь выполнить действие, когда кнопка нажата, текст кнопки немного опускается.

Я использую этот код в 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>

Пример CSS кнопки:

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

Также эти кнопки работают на фоне заголовка, я уверен, что это как-то связано с этими настройками:

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

Это работает хорошо, но единственная проблема в том, что все остальные кнопки также перемещают свой текст вниз? Почему это? Разве я не уточняю, что я хочу использовать только #btnhome? Все кнопки имеют совершенно разные идентификаторы. Все кнопки имеют одинаковые настройки CSS, кроме полей. Что мне нужно отредактировать?

Большое спасибо.