鼠标悬停按钮时导致页面下方内容被向下挤压的问题如何解决

问题原因 #

• 默认状态下按钮仅设置了边框颜色，未设置边框宽度，实际边框宽度为0；hover时新增5px宽度的边框，按钮总高度上下各增加5px，额外占据文档流空间，挤压下方内容
• hover状态中声明的pointer-events、position、z-index等属性为冗余属性，对当前效果无意义还会干扰渲染逻辑

修复方案 #

给按钮默认状态提前设置和hover等宽的边框，提前占据高度，避免hover时高度突变，同时清理冗余属性，添加过渡动画让交互更流畅。

修改后的完整CSS代码如下：

.creditsbtn {
    font-family: 'Courier New', Courier, monospace;
    color: #333;
    background: #AB5DFC;
    border-radius: 10px;
    /* 提前设置和hover等宽的边框，颜色和背景一致，视觉效果和原样式一致 */
    border: 5px solid #AB5DFC;
    padding-top: 5px;
    padding-bottom: 7px;
    padding-right: 10px;
    padding-left: 10px;
    font-size: 20px;
    /* 确保transform属性生效，添加过渡实现平滑动画 */
    display: inline-block;
    transition: all 0.2s ease;
}

.creditsbtn:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.2rem 0.4rem #777;
    /* 仅修改边框颜色，不改变宽度，按钮高度不变不会挤压下方内容 */
    border-color: #b16afd;
}

可选优化 #

当前HTML中<a>标签嵌套<button>的写法不符合HTML规范，可直接去掉button标签，将样式类加在a标签上，效果完全一致：

<a href="/credits" class="creditsbtn">button</a>

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