CSS按钮hover时切换背景渐变失效，如何解决？

问题原因 #

1. 冗余属性无意义：代码中background-color: plum属于无效设置，因为不透明的线性渐变背景会完全覆盖这个底色，不会产生任何视觉效果。
2. 模糊效果掩盖变化：filter: blur(2px)会模糊整个按钮（包括边框、文字和背景），导致渐变切换和边框变色的视觉差异被大幅弱化，看起来像是“失效”。
3. 过渡范围受限：初始transition-property仅指定了border-color，背景渐变、滤镜等属性的变化是瞬间触发的，没有过渡缓冲，也容易让你误判切换未生效。

修复方案一：直接调整现有代码 #

移除冗余属性，优化过渡和模糊效果，让变化更清晰：

button {
    background: linear-gradient(45deg, #8eb5e0, #f0b7f3, #c499da, #a97dd7);
    border: solid white;
    color: white;
    border-radius: 10px;
    padding: 1em;
    text-align: center;
    font-weight: bold;
    /* 扩展过渡属性，包含边框和滤镜 */
    transition: border-color 2s, filter 0.3s;
}

button:hover {
    background: linear-gradient(45deg, #e3e798, #f3e0b7, #99dab6, #7dc3d7);
    border-color: pink;
    /* 降低模糊值，保留效果的同时不掩盖其他变化 */
    filter: blur(1px);
}

修复方案二：实现渐变平滑过渡（伪元素方案） #

如果希望渐变切换有平滑过渡效果，可以用伪元素叠加背景，通过透明度变化实现：

button {
    position: relative;
    background: linear-gradient(45deg, #8eb5e0, #f0b7f3, #c499da, #a97dd7);
    border: solid white;
    color: white;
    border-radius: 10px;
    padding: 1em;
    text-align: center;
    font-weight: bold;
    transition: border-color 2s;
    overflow: hidden;
}

button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, #e3e798, #f3e0b7, #99dab6, #7dc3d7);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    border-radius: inherit;
}

button:hover {
    border-color: pink;
    filter: blur(1px);
}

button:hover::after {
    opacity: 1;
}

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