javascript - :active时移动元素

我在CSS中为按钮创建了表单，其中一项功能是，当用户单击按钮时，会将其向下和向右移动2个像素，以产生单击效果。

但是，问题在于我必须为每个按钮以及:active选择器指定位置，这使它不方便(很容易忘记更改active选择器的位置)。

有什么办法可以在我的按钮表单中指定移动？

按钮形式:

    .userPanel .button{
    ...
    /* button features */
    ...
    }

    .userPanel .button:active{
    ...
    }

按钮示例:
按钮1:

.userPanel #logOutButton{
...
top: 100px;
left: 120px;
...
}
.userPanel #logOutButton:active{
top: 102px;
left: 122px;
}

Button2:

.userPanel #buyButton{
...
top: 40px;
left: 60px;
...
}
.userPanel #buyButton:active{
top: 42px;
left: 62px;
}

(#logOutButton和#buyButton是divs和class="button"。)

我正在考虑以某种形式编写可以解决每个按钮问题的东西。
按钮形式:

    .userPanel .button{
    ...
    /* button features */
    ...
    }

    .userPanel .button:active{
    top: top + 2px;
    left: left + 2px;
    }

但是，它当然不起作用。
有什么办法吗？

最佳答案

您可以尝试transform: translate(2px, 2px);。
该解决方案比使用边距更通用，因为您无需为页面上的不同按钮元素重新定义边距。
但是它不能与旧的浏览器一起使用。