CSS：在悬停时为按钮添加边框。如何避免以下元素的移动？

Question

我的想法是在用户悬停时为提交按钮添加一个彩色边框。

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
  border-radius: 4px;
  padding: 5px 10px;
}

button:hover {
  border: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

但是紧随其后的文本然后向下移动。

如何在拥有边框的同时摆脱这些“跳跃”文本？

Answer 1

您需要在默认情况下定义透明边框button并border-color在悬停时更改。进一步避免font-weight在悬停时更改属性以及它还会扩展按钮的宽度和高度，并且它会在悬停时跳跃。

body div:first-child {
  padding: 10px 20px;
  background-color: #dedede;
  margin-top: 50px;
  margin-left: 300px;
  width: 120px;
  height: 80px;
  border-radius: 8px;
}

button {
  border: 6px solid transparent;
  font-weight: 800;
  border-radius: 4px;
  padding: 5px 10px;
}

button:hover {
  border-color: crimson;
  background-color: white;
  color: crimson;
}

<div class="container">
  <button>SUBMIT</button>
  <div>Please notice that ...</div>
</div>

Answer 2

将“边距”属性添加到“按钮”CSS 中，如下所示：

button {
  border-radius: 4px;
  padding: 5px 10px;
  margin: 4px 0;
}

button:hover {
  border: 6px solid crimson;
  font-weight: 800;
  background-color: white;
  color: crimson;
  margin: 0;
}

From停止一个元素在 hover 时使用 padding 移动。