使用CSS，如何防止在州......之间跳跃？

Question

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

`transform: translateY(-2px);`

问题是，如果你将鼠标移动到按钮下方，按钮就会开始移动但按钮现在会从正常跳转/跳转到活动状态，从而导致按钮跳跃。

有关如何实现按钮在悬停时向上移动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

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

.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>

Answer 2

一个想法是使用一个伪元素，它将在翻译后覆盖按钮下的空间，你将避免这种影响。所以就像你只是增加元素的总高度而不是翻译它。

.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>

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

.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>