Javascript 当：活动时移动元素

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

但是，问题是，我必须为每个按钮指定位置，另外为

：active

选择器指定位置，这给我带来了不便（很容易忘记更改

active

选择器的位置）

有没有办法在我的按钮表单中指定移动

按钮形式：

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

    .userPanel .button:active{
    ...
    }

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

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

按钮示例：
按钮1：

按钮2：

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

（

#logout按钮

和

#buy按钮

是带有

class=“button”

的div）

我在考虑用一种能解决每个按钮问题的形式写一些东西。
按钮形式：

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

    .userPanel .button:active{
    ...
    }

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

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

但是，它当然不起作用。

---

有什么办法吗？

使用边距应该可以。您可以在左侧添加

2px

，在顶部添加

2px

。大概是这样的：

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

尝试使用“上边距”和“左边距”规则。像这样：

.button1:active {
margin-left:5px;
margin-top:5px;

}

这是一把小提琴：

---

这就是你的意思吗？

你可以尝试

transform:translate（2px，2px）。
此解决方案可能比使用页边距更通用，因为您不需要为页面上的不同按钮元素重新定义页边距。
但是它不能与旧浏览器一起使用。
页边距工作得很好，但是我们只能使用“左”和“上”来指定位置，因为我们不能使用“右”、“下”、“左”和“右”来指定位置。这就是工作！这就是我的意思，不，我不必两次指定位置！