使用 CSS，如何防止 <button> 在状态...位置之间跳跃？

Question

我正在努力构建一个按钮样式，当用户将鼠标悬停在某个按钮上时，该按钮会向上移动 2 个像素。我在悬停时使用以下内容：

`transform: translateY(-2px);`

问题是，如果您将鼠标移到按钮下方，按钮开始移动，但按钮现在 bounces/jumps 从正常状态变为活动状态，导致按钮跳动。

关于如何实现按钮在悬停时向上移动 2 个像素但当鼠标靠近按钮边缘时没有跳跃的想法？

.ui.button {
  outline: none;
  height: 48px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  padding-top: 12.5px;
  padding-bottom: 12.5px;
  color: #fff;
  background: green;
  border: 1.5px solid darkGreen;
  box-shadow: 0 2px rgba(6,164,105,.25);
  transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}

.ui.primary.button:hover {
  transform: translateY(-2px);
  background: green;
  border-color: darkGreen;
  box-shadow: 0 4px rgba(6,164,105,.25);
}

<button class="ui medium primary button  button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>

Answer 1

一个想法是使用一个伪元素，在翻译后覆盖按钮下方的 space，您将避免这种效果。所以这就像您只是增加元素的总高度而不是平移它。

.ui.button {
  position:relative;
  outline: none;
  height: 48px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  padding-top: 12.5px;
  padding-bottom: 12.5px;
  color: #fff;
  background: green;
  border: 1.5px solid darkGreen;
  box-shadow: 0 2px rgba(6,164,105,.25);
  transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}
.ui.button:after {
  content:"";
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  height:0;
}
.ui.primary.button:hover {
  transform: translateY(-2px);
  background: green;
  border-color: darkGreen;
  box-shadow: 0 4px rgba(6,164,105,.25);
}
.ui.primary.button:hover:after {
  content:"";
  height:2px;
  bottom:-3.5px; /* Don't forget the border !*/
}

<button class="ui medium primary button  button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>

另一个想法是在应用悬停的位置为按钮使用一个容器。这将适用于任何转换值，并且您可以避免进行计算以查找伪元素的值：

.ui.button {
  position: relative;
  outline: none;
  height: 48px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  padding-top: 12.5px;
  padding-bottom: 12.5px;
  color: #fff;
  background: green;
  border: 1.5px solid darkGreen;
  box-shadow: 0 2px rgba(6, 164, 105, .25);
  transition: transform .1s ease-in-out, box-shadow .1s ease-in-out, -webkit-transform .1s ease-in-out, -webkit-box-shadow .1s ease-in-out;
}

.contain {
  display: inline-block;
}

.contain:hover .ui.primary.button {
  transform: translateY(-2px);
  background: green;
  border-color: darkGreen;
  box-shadow: 0 4px rgba(6, 164, 105, .25);
}

<div class="contain">
<button class="ui medium primary button  button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>
</div>

Answer 2

与 Temani Afif 的答案类似，我会使用比元素长 2 像素的伪元素，但在悬停时将溢出从隐藏切换为可见。

.ui.button {
  position:relative; overflow:hidden;
  outline: none;
  height: 48px;
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  padding-top: 12.5px;
  padding-bottom: 12.5px;
  color: #fff;
  background: green;
  border: 1.5px solid darkGreen;
  box-shadow: 0 2px rgba(6,164,105,.25);
  transition: transform .1s ease-in-out,box-shadow .1s ease-in-out,-webkit-transform .1s ease-in-out,-webkit-box-shadow .1s ease-in-out;
}

.ui.primary.button::after{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:calc(100% + 3.5px); /* translate + bottom border height*/
}
.ui.primary.button:hover {
  overflow:visible;
  transform: translateY(-2px);
  background: green;
  border-color: darkGreen;
  box-shadow: 0 4px rgba(6,164,105,.25);
}

<button class="ui medium primary button  button-icon-with-text " role="button" style="margin-bottom: 0px;">Primary Button</button>

使用 CSS，如何防止 <button> 在状态...位置之间跳跃？

With CSS, how to prevent a <button> from jumping between state...positions?

html

css

css-transforms