CSS按钮hover拉伸、active 3D效果引发下方段落位移的解决方法

修改padding、margin属性会直接改变元素在标准文档流中的占位尺寸，后续相邻元素会自动顺着文档流移位，这就是段落被挤压下移的核心原因：

• hover状态下上下padding各增加10px，按钮总高度增加20px，会把下方段落向下顶20px
• active状态下上下margin各增加3px，按钮垂直方向的占位又新增6px，段落会进一步下移

用不影响文档流占位的CSS属性实现动效，就能完全避免布局偏移，同时视觉效果和原有逻辑完全一致：

• 悬停拉伸效果改用transform: scale()实现，transform属性的渲染不会改变元素原始占位，不会触发周边元素重排
• 按压效果改用transform: translateY()配合阴影变化模拟，不需要额外增加margin
• 可以给按钮外层套一个固定高度的容器，避免动效放大时和周边元素产生视觉重叠

修复后的完整代码如下：

.test-button {
  background-color: navy;
  color: white;
  border: none;
  cursor: pointer;
  /* 固定基础padding，交互状态不再修改 */
  padding: 8px 15px;
  font-size: 18px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  /* 过渡效果应用到transform，动画更流畅，性能更好 */
  transition: all 0.15s ease;
}

.test-button:hover {
  /* 缩放比例可以根据自己想要的拉伸幅度调整，和原padding变化的视觉效果对齐即可 */
  transform: scale(1.2);
}

.test-button:active {
  /* 保留放大效果的同时向下位移，模拟按压下沉的3D感 */
  transform: scale(1.2) translateY(3px);
  box-shadow: none;
}

/* 可选：按钮外层容器固定高度，彻底规避动效和其他元素的视觉冲突
.button-container {
  height: 60px;
  display: flex;
  align-items: center;
}
*/

如果不想用缩放方案，坚持用padding调整拉伸感，也可以给按钮设置固定的宽高值，加上box-sizing: border-box保证padding变化不会改变按钮总占位尺寸，但这种方案性能不如transform实现，动画流畅度会差一些。

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