How to stop an adjacent button from moving with a button with has a changing margin

Question

Here's a small snippet that illustrates a simple problem that I am facing:

button {
    border: solid 2px rgb(200, 200, 200);
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 2px 0 rgb(200, 200, 200);
    background-color: white;
    font-weight: bold;
    cursor: pointer;
    margin-top: 0;
    margin-bottom: 2px;
    transition-duration: 0.2s;
}

button:active {
    margin-top: 2px;
    margin-bottom: 0;
    box-shadow: 0 0px 0 rgb(200, 200, 200);
    transition-duration: 0.2;
}

<button>Hello World!</button>
<button>Hello World!</button>

Do you see the problem? If one of the buttons is clicked, it ends up "dragging" the other button with itself. How do I stop it from doing this? I suspect this is happening due to the changes in their margins.

Answer 1

You can use transform: translateY() instead of margin

button {
    border: solid 2px rgb(200, 200, 200);
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 2px 0 rgb(200, 200, 200);
    background-color: white;
    font-weight: 700;
    cursor: pointer;
}

button:active {
    transform: translateY(2px);
    box-shadow: 0 0px 0 rgb(200, 200, 200);
    transition-duration: 0.2;
}

<button>Hello World!</button>
<button>Hello World!</button>