css - 移动按钮推送内容

Question

所以我正在做 CSS，并且我已经开始设计我的输入和按钮的样式。我有一个按钮底部边框较宽的设置，单击按钮会缩短边框并将按钮向下移动，从而创建伪 3d“插入”效果。问题是当我按下按钮时，它下面的内容会向上移动。这不应该发生，因为(根据我的理解)按钮的底部在同一个地方。我在按钮上启用了一个轮廓，它不会一直移动。然后，我想我可以通过增加底部边距来推回内容。这使下面的内容在动画结束时保持相同的距离，但它在动画期间会抖动，所以它仍然不是最佳的。

这是我的代码(我包含了一个带有和不带有边距变化的按钮示例):

---

button {
    background-color:#f8f8f8;
    border: solid 1px #ccc;
    border-bottom:solid 3px #ccc;
    padding:4px;
    transition:border-width 0.2s ease, transform 0.2s ease, margin-bottom 0.2s ease;
    margin-bottom:4px;
    outline:solid 1px #000;
}
button:active {
    border-bottom-width:1px;
    transform:translateY(2px);
}
.margin-button:active {
    margin-bottom:6px;
}

<p>text</p>
<p><button>button with static margin</button></p>
<p>text</p>
<p><button class="margin-button">button with changing margin</button></p>
<p>text</p>

---

所以我的问题是: 如何消除边距变化带来的抖动，或者是否有一种完全不同的方法可以更好地解决这个问题？

---

JSFiddle 示例: http://jsfiddle.net/Cyoce/jknx5c66/

---

编辑:我忘了提及这一点，但我希望底部边框——或用于重新创建/模拟它的任何东西——在悬停时改变颜色(在本例中为#0af)。

Answer 1

您可以使用框阴影代替边框，然后为框阴影和变换设置动画。

抖动的发生是因为每次边框或边距发生变化时，都需要重新绘制页面，效率很低。

最好为不触发重绘的属性设置动画(例如 transform 和 border-box)。

举个例子: http://codepen.io/TheDutchCoder/pen/ogdLQG

button {
  position: relative;

  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: none;

  background-color: #eee;

  transition: all 0.15s ease;

  box-shadow: 0 3px 0 0 #ccc;
}

button:focus,
button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 0 #ccc;
}