如何修复跳舞按钮？

Question

考虑以下按钮样式：

body {
  padding: 1rem;
}

button {
  background: blue;
  color: #fff;
  padding: 1rem;
}

button:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

<button>kinda shaky</button>  

当我指向边框时，按钮开始跳舞!!

如何修复舞蹈按钮？

Answer 1

轻松修复是将包装和display用作inline-block：

body {
  padding: 1rem;
}

span {
  display: inline-block; /* "inline-flex" is ok too */
}

button {
  background: blue;
  color: #fff;
  padding: 1rem;
}

span:hover > button {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

<span><button>kinda shaky</button></span>

Answer 2

transform属性会导致这种不稳定的行为。

如果你想保持translate悬停，那么简单的解决方法是用内联块元素包装按钮。

两个案例的

演示都在这里 - Jsfiddle

Answer 3

这将以您对元素进行样式设置的方式发生，浏览器认为您的按钮已移动，因此您的鼠标离开它，将其发送回无悬停，然后将其悬停以便移动等等等等

有几种解决方法可供选择，但其中一种方法是：将按钮放在div中，将鼠标悬停在div上，然后将其设置为样式

div:hover > button{
   transform: translateY(-3px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

或者你可以通过在悬停时在按钮上添加填充来解决问题，但是这将是不稳定的，并且在不同的浏览器上可能无法正常工作

Answer 4

您只需要在变换中添加一些div。试试下面的代码。

button {
    background: blue;
    color: #fff;
    padding: 1rem;
}

button:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}

.janjok{
    margin:10px;
}

.janjok:hover{
    transform: translateY(-3px);
    border-bottom:5px solid white;
}

<div class="janjok">
			<button>kinda shaky</button>
</div>