Pushable button using CSS

css, html

Solution

How can I achieve the same effect without adjusting the positions of other elements?

I suggest using `position: relative;` for the button, then set `top: 2px` for `:active` pseudo-class, as follows:

button {
    /* Other styles... */
    position: relative; /* position the element as relative */
    outline: none;      /* Just added for the demo          */
}

button:active {
    top: 2px;  /* move the element without affecting the others' position */
    box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, .1);
}

JSFiddle Demo.

Problem

I'm trying to create a slightly animated pushable button. My goal is to achieve a button like this: see the source code (jsfiddle) with using exactly one HTML tag and the minimal amount of new CSS features like transform and transition. However as you see in the jsfiddle; if you click the button at least twice the whole line (and the content beneath) bounces too. That is ofcourse because of the margin set within the `:active` selector. My second approach was using the the CSS transform property. That worked perfectly except I still had the need the change the height of the button (which will result in the same problem). So my question is: How can I achieve the same effect without adjusting the positions of other elements?

Original source