CSS中按钮hover时背景渐变过渡失效问题求助

CSS的transition属性无法直接对线性渐变（属于background-image类型）进行过渡动画，这就是你设置的hover渐变没有过渡效果的原因。

可以通过**伪元素叠加渐变+过渡支持的属性（如opacity、transform）**来实现预期效果，以下是修改后的代码：

HTML（无需修改） #

<a href="#" class="banner-learn-more">LEARN MORE</a>

修改后的CSS #

a {
  text-decoration: none;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-learn-more {
  height: 45px;
  position: absolute;
  width: 190px;
  left: 45%;
  border-radius: 25px;
  /* 默认显示的渐变 */
  background: linear-gradient(90deg, #ebe47a 0%, #e2e2e8 50%, #c966b7 100%);
  position: relative;
  overflow: hidden; /* 隐藏伪元素超出容器的部分 */
}

.banner-learn-more::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  /* hover时要显示的渐变 */
  background: linear-gradient(90deg, #c966b7 0%, #e2e2e8 50%, #ebe47a 100%);
  opacity: 0; /* 默认隐藏伪元素的渐变 */
  transition: opacity 1s ease-in-out; /* 对opacity添加过渡 */
  z-index: -1; /* 让伪元素在文字下方，不遮挡内容 */
}

.banner-learn-more:hover::before {
  opacity: 1; /* hover时显示伪元素的渐变 */
}

原理说明 #

• 用::before伪元素承载hover状态的渐变，初始通过opacity: 0隐藏
• 当鼠标悬浮时，改变伪元素的opacity为1，利用transition对opacity属性的支持实现平滑过渡
• 给容器设置overflow: hidden和position: relative，确保伪元素不会超出按钮范围

如果想要滑动切换的过渡效果，可以把opacity的逻辑换成transform，示例如下：

.banner-learn-more::before {
  /* 其他属性不变 */
  transform: translateX(100%);
  transition: transform 1s ease-in-out;
}

.banner-learn-more:hover::before {
  transform: translateX(0);
}

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