如何修复跳舞按钮？

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>