拟态风格按钮Hover过渡动画失效问题求助

你遇到的问题核心是：CSS无法直接在外部box-shadow和inset内部box-shadow之间生成平滑过渡——这两种阴影属于不同的属性类型，浏览器无法插值计算中间状态，所以hover时会直接跳变，没有预期的动画效果。

下面提供两种可行的解决方案：

方案一：同时保留内外阴影，通过透明度过渡实现 #

默认状态下让内阴影完全透明，hover时显示内阴影并隐藏外阴影，确保所有阴影属性属于同类型，浏览器可正常生成过渡动画：

body {
    background-color: #292D32;
}

#btn {
    cursor: pointer;
    font-size: 2em;
    text-align: center;
    border:none;
    background-color: #292D32;
    color: #BEC6BE;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    padding: 10px;
    border-radius: 50px;
    margin-top: 100px;
    margin-left: 100px;
    /* 同时声明内外阴影，默认内阴影透明 */
    box-shadow: 
        10px 10px 15px #1C1E20, 
        -10px -10px 15px #3A3E42,
        inset 0 0 0 rgba(28, 30, 32, 0),
        inset 0 0 0 rgba(58, 62, 66, 0);
    transition: box-shadow 0.2s ease;
}

#btn:hover {
    /* hover时外阴影透明，内阴影显示 */
    box-shadow: 
        0 0 0 rgba(28, 30, 32, 0), 
        0 0 0 rgba(58, 62, 66, 0),
        inset 10px 10px 15px #1C1E20,
        inset -10px -10px 15px #3A3E42;
}

方案二：用伪元素模拟外阴影，通过缩放实现按压效果 #

这种方式更简洁，通过伪元素承载外阴影，hover时缩放伪元素模拟按钮按压的物理感，同时显示内阴影：

body {
    background-color: #292D32;
}

#btn {
    cursor: pointer;
    font-size: 2em;
    text-align: center;
    border:none;
    background-color: #292D32;
    color: #BEC6BE;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    padding: 10px;
    border-radius: 50px;
    margin-top: 100px;
    margin-left: 100px;
    position: relative;
    transition: box-shadow 0.2s ease;
}

#btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    box-shadow: 10px 10px 15px #1C1E20, -10px -10px 15px #3A3E42;
    z-index: -1;
    transition: transform 0.2s ease;
}

#btn:hover {
    box-shadow: inset 10px 10px 15px #1C1E20, inset -10px -10px 15px #3A3E42;
}

#btn:hover::before {
    transform: scale(0.95);
}

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