求助：修复鼠标悬停按钮时尺寸异常变大的问题

核心问题 #

按钮悬停时尺寸变化有两个关键原因：

• .button:hover中写了flex: 2，而按钮所在的.i-left是flex容器，这个属性会强制按钮在悬停时抢占更多可用空间，直接改变宽度。
• 悬停时新增了border: 1px solid var(--purpleNew)，默认盒模型下border会额外增加元素总尺寸，导致按钮整体变大。

分步解决 #

1. 移除flex属性 #

修改App.css中的.button:hover，删掉flex: 2：

.button:hover{
    background: white;
    /* 删除此行：flex: 2; */
    cursor: pointer;
    color: var(--purpleNew);
    border: 1px solid var(--purpleNew);
}

2. 解决border导致的尺寸变化 #

有两种可选方案：

方案一：使用border-box盒模型

给按钮添加box-sizing: border-box，让border包含在元素已设置的宽高范围内：

.button {
    border-radius: 34px;
    border: none;
    color: white;
    font-size: 16px;
    padding: 11px 26px 11px 26px;
    background: linear-gradient(to right,#ff5858,#f857a6);
    box-shadow: 0 10px 10px -2px rgba(0,0,0,.25);
    box-sizing: border-box; /* 新增此行 */
}

方案二：默认添加透明border

在非悬停状态的.button中设置透明border，悬停时仅改变颜色，不增加尺寸：

.button {
    border-radius: 34px;
    border: 1px solid transparent; /* 将原border:none替换为此行 */
    color: white;
    font-size: 16px;
    padding: 11px 26px 11px 26px;
    background: linear-gradient(to right,#ff5858,#f857a6);
    box-shadow: 0 10px 10px -2px rgba(0,0,0,.25);
}

3. 优化样式冗余 #

.i-button中重复了.button的样式，建议删除重复部分，仅保留独有的宽高设置，避免样式冲突：
修改Intro.css中的.i-button：

.i-button {
    width: 6rem;
    height: 2rem;
    /* 删除以下重复样式：
    border-radius: 34px;
    border: none;
    color: white;
    font-size: 16px;
    padding: 11px 26px 11px 26px;
    background: linear-gradient(to right, #ff5858, #f857a6);
    box-shadow: 0 10px 10px -2px rgba(0, 0, 0, .25);
    */
}

内容的提问来源于stack exchange，提问作者Yiğit Güneş