Question

我为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;
    }

但是，它当然不起作用有没有办法做到这一点？

Answer 1

使用保证金应该有效。您可以在左侧添加2px，在顶部添加2px。像这样：

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

Answer 2

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

Answer 3

尝试使用＆＃34; margin-top＆＃34;和＆＃34; margin-left＆＃34;规则。像这样：

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

}

这是一个小提琴：http://jsfiddle.net/50dqhrps/

这是你的意思吗？

移动元素：活动时

3 个答案: