CSS实现按钮按压效果的正确方式：避免元素偏移

问题出在你通过修改margin实现按压偏移——margin是布局属性，调整它会改变元素占据的空间，进而挤压周围元素导致移位。要保留按压效果同时避免偏移，推荐用不影响布局流的视觉变换，比如transform: translate()，它只会改变元素的视觉位置，不会修改其在布局中占据的空间。

修改后的CSS代码如下：

main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.octave {
    display: grid;
    grid-template-rows: 25% 25% 25% 25%;
    grid-template-columns: repeat(14, auto);
}

button {
    border: 1px solid black;
    margin: 1px;
    box-shadow: 5px 5px 5px black;
    cursor: pointer;
}

button:active {
    /* 用translate替代margin，视觉下移右移，不改变布局空间 */
    transform: translate(3px, 3px);
    box-shadow: 1px 1px 5px black;
}

为什么这个方法有效？ #

transform: translate(3px, 3px) 对应你原来的margin-left:4px和margin-top:4px（原margin是1px，差值为3px），但它是在元素自身的渲染图层上做偏移，不会触发页面布局重排，周围元素感知不到这个变化，自然不会偏移。

如果你偏好使用相对定位，也可以这样写（效果类似，但性能略逊于transform）：

button {
    border: 1px solid black;
    margin: 1px;
    box-shadow: 5px 5px 5px black;
    cursor: pointer;
    position: relative; /* 开启相对定位 */
}

button:active {
    top: 3px;
    left: 3px;
    box-shadow: 1px 1px 5px black;
}

内容的提问来源于stack exchange，提问作者Vladyslav