html - 使用 CSS 的可按下按钮

Question

我正在尝试创建一个略带动画的可按下按钮。

我的目标是实现这样的按钮:

see the source code (jsfiddle)

仅使用一个 HTML 标记和最少数量的新 CSS 功能，如转换和过渡。

然而，正如您在 jsfiddle 中看到的那样;如果您至少单击按钮两次，整行(以及下面的内容)也会弹跳。这当然是因为在 :active 选择器中设置了边距。

我的第二种方法是使用 CSS 转换属性。这非常有效，除了我仍然需要更改按钮的高度(这将导致同样的问题)。

那么我的问题是:如何在不调整其他元素位置的情况下达到同样的效果？

Answer 1

How can I achieve the same effect without adjusting the positions of other elements?

我建议对按钮使用position: relative;，然后为:active伪类设置top: 2px，如下:

button {
    /* Other styles... */
    position: relative; /* position the element as relative */
    outline: none;      /* Just added for the demo          */
}

button:active {
    top: 2px;  /* move the element without affecting the others' position */
    box-shadow: inset 0px 2px 1px 0px rgba(0, 0, 0, .1);
}

JSFiddle Demo .