按钮添加box-shadow后下方文字移位问题求助

问题根源 #

• box-shadow默认向外扩展，hover时新增的阴影会占据额外布局空间，挤压下方文本造成移位。
• hover状态下设置display: inline-block，改变了按钮原本的行内元素布局特性，进一步干扰排版。

修复方案 #

方案1：用outline替代box-shadow（简单高效）

如果不需要阴影模糊效果，outline不会占用布局空间，完美解决移位问题：

button{
  border:none;
  outline:none;
  background-color:white;
  padding:2px;
  cursor: default;
}
button:hover{
  background-color:#e3e3e3;
  /* 替换box-shadow为outline */
  outline: 2px solid grey;
}

方案2：提前预留阴影空间

给按钮预设透明阴影，hover时替换为真实阴影，确保布局空间始终一致：

button{
  border:none;
  outline:none;
  background-color:white;
  padding:2px;
  cursor: default;
  display: inline-block; /* 提前固定布局类型，避免hover时切换 */
  box-shadow: 0 0 0 0 transparent; /* 预留阴影位置 */
}
button:hover{
  background-color:#e3e3e3;
  box-shadow: 2px 2px grey;
}

方案3：结合transform避免布局偏移（推荐）

通过transform: translateZ(0)触发硬件加速，让阴影渲染不影响布局空间：

button{
  border:none;
  outline:none;
  background-color:white;
  padding:2px;
  cursor: default;
  display: inline-block;
  transform: translateZ(0); /* 开启硬件加速，阴影不占用布局空间 */
}
button:hover{
  background-color:#e3e3e3;
  box-shadow: 2px 2px grey;
}

注意：你代码里的标签拼写错误，是button不是butto，修正后样式才能正常生效。

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