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

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 的答案类似，我会使用比元素长 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>