CSS按钮悬停放大不挤压其他按钮的实现问题求助

核心问题分析 #

你通过调整padding和margin抵消尺寸变化的思路是对的，但apply按钮的问题在于：

1. 垂直方向的padding增加没有对应调整margin，导致按钮总高度变大挤压下方元素
2. 存在无效CSS写法：margin-top: none，正确写法应为margin-top: 0
3. 字体大小变化会额外增加按钮高度，没有通过line-height控制

推荐方案：用transform: scale()实现放大（最简单） #

这种方式不会改变元素在文档流中的占位空间，完全不会挤压其他元素，是实现悬停放大最省心的方法。

修改后的完整代码：

.apply-button {
  margin-left: 20px;
  margin-right: 20px;
  background-color: rgb(10, 102, 194);
  color: white;
  border: none;
  padding: 10px 15px; /* 简化padding写法 */
  border-radius: 120px;
  font-weight: bold;
  font-size: 17px;
  margin-top: 0; /* 修正无效写法 */
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
  transform-origin: center; /* 确保从按钮中心放大 */
}

.apply-button:hover {
  transform: scale(1.05); /* 放大1.05倍，可自行调整比例 */
  background-color: rgb(0, 59, 122);
  color: rgba(255, 255, 255, 0.801);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.26);
}

.save-button {
  margin-left: 18px;
  margin-top: 50px;
  background-color: rgb(255, 255, 255);
  color: rgb(10, 102, 194);
  border: 2px solid rgb(10, 102, 194); /* 简化border写法 */
  padding: 10px 20px;
  border-radius: 40px;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
  transition: box-shadow 0.15s, background-color 0.15s, transform 0.15s;
  transform-origin: center;
}

.save-button:hover {
  transform: scale(1.05);
  background-color: rgba(87, 171, 255, 0.26);
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.26);
}

.save-button:active {
  background-color: rgb(10, 102, 194);
  color: white;
}

<button class="apply-button">
  Apply on company website
</button>

<button class="save-button">
  Save
</button>

备选方案：修复padding/margin抵消逻辑 #

如果你坚持用调整内边距和外边距的方式，需要确保所有方向的尺寸变化都被完全抵消：

.apply-button {
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 0;
  margin-bottom: 0;
  background-color: rgb(10, 102, 194);
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 120px;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
  line-height: 1; /* 避免字体大小变化额外增加高度 */
  transition: background-color 0.15s, color 0.15s, margin 0.15s, padding 0.15s, font-size 0.15s, box-shadow 0.15s;
}

.apply-button:hover {
  margin-left: 13px;
  margin-right: 13px;
  margin-top: -1px; /* 抵消padding-top增加的1px高度 */
  margin-bottom: -1px; /* 抵消padding-bottom增加的1px高度 */
  padding: 11px 22px;
  font-size: 18px;
  background-color: rgb(0, 59, 122);
  color: rgba(255, 255, 255, 0.801);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.26);
}

.save-button {
  margin-left: 18px;
  margin-top: 50px;
  background-color: rgb(255, 255, 255);
  color: rgb(10, 102, 194);
  border: 2px solid rgb(10, 102, 194);
  padding: 10px 20px;
  border-radius: 40px;
  font-weight: bold;
  font-size: 17px;
  cursor: pointer;
  line-height: 1;
  transition: box-shadow 0.15s, margin-left 0.15s, padding 0.15s, background-color 0.15s, border-width 0.15s;
}

.save-button:hover {
  margin-left: 10px;
  background-color: rgba(87, 171, 255, 0.26);
  padding-left: 24px;
  padding-right: 24px;
  border-width: 3px;
  box-shadow:0px 3px 10px rgba(0, 0, 0, 0.26);
}

.save-button:active {
  background-color: rgb(10, 102, 194);
  color: white;
}

内容的提问来源于stack exchange，提问作者arctickannan