CSS链接按钮Hover状态推挤内容问题的解决咨询

问题根源在于：当你给按钮的:hover/:active状态添加2px solid white边框时，默认盒模型下边框会额外增加按钮的总尺寸，导致容器内的其他元素被推挤。

以下是几种可行的解决方法：

方法1：给初始状态添加透明边框 #

在.main-cta-btn:link, .main-cta-btn:visited中添加与hover状态相同宽度的透明边框，这样hover时仅改变边框颜色，元素总尺寸保持不变：

.main-cta-btn:link,
.main-cta-btn:visited {
  display: inline-block;
  background: white;
  color: #28b485;
  border: 2px solid transparent; /* 添加透明边框 */
  border-radius: 50px;
  padding: 10px 40px;
  font-weight: bold;
  font-size: 20px;
  text-transform: uppercase;
  animation: moveBottom 2s ease-in;
  text-decoration: none;
}

.main-cta-btn:hover,
.main-cta-btn:active {
  background: transparent;
  color: white;
  border-color: white; /* 仅修改边框颜色 */
  cursor: pointer;
}

方法2：使用box-sizing: border-box #

将按钮的盒模型设置为border-box，这样边框会被包含在元素的指定尺寸内，不会额外增加总宽度/高度：

.main-cta-btn:link,
.main-cta-btn:visited {
  box-sizing: border-box; /* 启用border-box */
  display: inline-block;
  background: white;
  color: #28b485;
  border: none;
  border-radius: 50px;
  padding: 10px 40px;
  font-weight: bold;
  font-size: 20px;
  text-transform: uppercase;
  animation: moveBottom 2s ease-in;
  text-decoration: none;
}

.main-cta-btn:hover,
.main-cta-btn:active {
  background: transparent;
  color: white;
  border: 2px solid white;
  cursor: pointer;
}

你也可以给全局元素统一设置box-sizing: border-box，避免后续再遇到类似布局问题：

* {
  box-sizing: border-box;
}

方法3：使用outline替代border（注意局限性） #

outline不会影响元素的布局尺寸，因此不会推挤其他元素，但它不支持border-radius（如果需要保留按钮圆角效果，此方法不适用）：

.main-cta-btn:hover,
.main-cta-btn:active {
  background: transparent;
  color: white;
  outline: 2px solid white; /* 用outline代替border */
  cursor: pointer;
}

推荐优先使用方法1或方法2，它们能完美适配你的按钮圆角需求，同时彻底解决布局推挤问题。

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