移动按钮推送内容

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/

Edit:I 忘记提及这一点，但我希望底部边框——或用于 recreate/simulate 它的任何东西——在悬停时改变颜色（在本例中为 #0af）。

Answer 1

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

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

最好为不触发重绘的属性设置动画（例如变换和边框）。

举个例子： 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;
}

Answer 2

Reinier Kaper 提出了一个很好的解决方案，并在他的中很好地解释了它的优点。

但是，如果您坚持使用 border-bottom（或类似）属性作为过渡的核心，我知道我自己经常使用的两种可能的解决方法：

使按钮元素浮动，例如应用float: left，或
给按钮的容器一个固定的高度。

Working example on JSFiddle featuring both approaches.

作为站点节点 - 仅在我看来 - 应避免使您的元素对鼠标手势变慢：我建议向 :active 元素添加 transition-duration: 0 属性： http://jsfiddle.net/jknx5c66/5/

移动按钮推送内容

Moving button pushing content

css

animation

button

transition