div按钮linear-gradient渐变hover过渡效果未达预期，求助问题原因

CSS 原生 transition 属性不支持对 background-image 进行过渡动画，linear-gradient 属于 background-image 的取值类别，浏览器无法计算两个渐变规则之间的中间插值状态，因此你设置的 all 过渡不会作用在渐变背景上，只会出现硬切效果，无法得到平滑的渐变过渡动画。

通过伪元素叠加 + 透明度过渡的方式模拟渐变过渡效果，透明度是 transition 原生支持的属性，可实现平滑动画，无需修改原有HTML结构，修改后的CSS如下：

.address-btn {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 5px;
  cursor: pointer;
  border: 2px;
  color: #fff;
  /* 初始渐变作为默认背景 */
  background: linear-gradient(to right, #2393ff 0%, #5f01ff 100%);
  border-radius: 3px;
  
  /* 用伪元素承载hover状态的渐变 */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to right, #5f01ff 0%, #2393ff 100%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: -1;
  }

  a {
    color: #fff;
    text-decoration: none;
    margin-right: 10px;
    font-size: 13px;
  }

  /* hover时修改伪元素透明度实现渐变切换效果 */
  &:hover::before {
    opacity: 1;
  }
}

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