Button click using CSS

Question

I am trying to create a slightly animated pressed button.

My goal is to create a button like this:

see source code (jsfiddle)

using only one HTML tag and a minimal amount of new CSS features such as conversion and transition.

However, as you see in jsfiddle ; if you click on the button at least twice the entire line (and the contents below) also bounce. This, of course, is due to the field set in the selector :active.

My second approach used the CSS transform property. This worked fine, except that I still needed to change the height of the button (which would lead to the same problem).

So my question is : how can I achieve the same effect without changing the position of other elements?

Answer 1

, ?

position: relative; , top: 2px - :active :

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.

Answer 2

transform: translate top/left ( , ), , , IE:

button {
    ....
     transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
    ....
}

button:active {
    transform: translatey(2px);
    -moz-transform: translatey(2px);
    -webkit-transform: translatey(2px);
    ...
}