Сохранение встроенного текста на месте

Question

Я делал кнопку, которая (надеюсь) выглядит довольно реалистично. Одна часть этого состоит в том, что текст перемещается вниз на 1 пиксель внутри кнопки при нажатии. Я сделал это, добавив дополнительный пиксель вверху и удалив один снизу.

К сожалению, я разработал мою кнопку для работы inline (inline-block), и когда кнопка «нажата», это означает, что любой текст в строке также будет нажат. Теперь я думаю, что знаю почему (предположительно из-за базовой линии текста), но мне интересно, знает ли кто-нибудь, как я могу получить тот же эффект «толкаемого» при сохранении окружающего текста на месте. Я хотел бы избежать поплавков, если это возможно.

В любом случае с кодом: http://gard.me/xsfqH

HTML:

<a class="button noIcon smaller" href="#">Buy Now</a> hello world

CSS:

a.button {
    margin: 20px;
    display: inline-block;
    padding: 12px 12px 12px 12px;

    background: none;
    background-repeat: no-repeat;
    background-position:  9px 5px;
    background-position:  9px 5px, 0 0;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-width: 1px;
    border-style: solid;

    font-family: Verdana, Arial, Sans-Serif;
    text-decoration: none;
}

a.button:active {
    padding-top: 13px; padding-bottom: 11px;
    -webkit-box-shadow: inset 0px 1px 6px -1px #000000;
    -moz-box-shadow: inset 0px 1px 6px -1px #000000;
    box-shadow: inset 0px 1px 6px -1px #000000;
}

a.button.noIcon {
    color: #FFECEA;
    background-position: 0 0;
    background-color: #E46553;
    background-image: -o-linear-gradient(bottom, #D15039 0%, #F27466 100%);
    background-image: -moz-linear-gradient(bottom, #D15039 0%, #F27466 100%);
    background-image: -webkit-linear-gradient(bottom, #D15039 0%, #F27466 100%);
    background-image: -ms-linear-gradient(bottom, #D15039 0%, #F27466 100%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #D15039), color-stop(1, #F27466));
    border-color: #A03E33;
}

Answer 1

, поскольку это встроенный блок, вы можете использовать выравнивание по вертикали.

, так что все, что вам нужно сделать, это

a.button:active {
    padding-top: 13px;padding-top:11px;
    -webkit-box-shadow: inset 0px 1px 6px -1px #000000;
    -moz-box-shadow: inset 0px 1px 6px -1px #000000;
    box-shadow: inset 0px 1px 6px -1px #000000;
    vertical-align:1px;
}

и проблема решена