Question

I have been making a button which (hopefully) looks fairly realistic. One part of this is having the text move down 1px inside the button when it is pressed. I’ve done this by adding an additional pixel to the top and removing one from the bottom.

Unfortunately, I’ve designed my button to work inline (inline-block) and when the button is “pushed” it means any text on the line also gets pushed down. Now I think I know why (presumably due to the baseline of the text) but I wonder if anyone knows how I can get the same “pushed” effect whilst keeping surrounding text in place. I would like to avoid floats if possible.

Anyway on with the code:
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

since it’s inline-block you can use vertical-align.

so all you have to do is

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;
}

and problem solved