如何实现按钮渐变边框hover平滑过渡，避免移出时出现闪烁？

问题原因 #

• 渐变属于background-image属性，CSS原生不支持该属性的过渡动画，鼠标移出时渐变背景直接消失，会触发闪烁
• hover状态修改了边框的基础属性，从黑色实线切换为透明，属性切换没有平滑衔接，进一步加重了闪烁效果

修复方案 #

通过伪元素承载渐变边框，用透明度过渡替代背景渐变切换，修改后的代码如下：

CSS代码 #

.button {
  border-radius: 9999px;
  text-align: center;
  border: 2px solid #000;
  width: 300px;
  transition: all .5s ease;
  height: 3rem;
  display: table;
  letter-spacing: 0.125rem;
  /* 新增配置 */
  position: relative;
  background-color: #fff;
  background-clip: padding-box;
}

/* 新增渐变承载伪元素 */
.button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  margin: -2px;
  z-index: -1;
  background: linear-gradient(90deg, rgba(151,215,0,1) 0%, rgba(0,169,224,1) 50%, rgba(51,0,114,1) 100%);
  opacity: 0;
  transition: opacity .5s ease;
}

.button:hover {
  border-color: transparent;
}

.button:hover::before {
  opacity: 1;
}

.button-text {
  display: table-cell;
  vertical-align: middle;
}

HTML代码（无需修改） #

<a href="#" class="button">
  <div class="button-text">
    Button
  </div>
</a>

实现逻辑 #

• 渐变边框单独放在::before伪元素中，通过透明度控制显示隐藏，避开了background-image无法过渡的限制
• 按钮默认保留黑色实线边框，hover时仅将边框设为透明，和伪元素的淡入效果同步，没有属性切换断层
• 按钮背景裁剪到padding区域，既不会盖住下层渐变边框，也不会影响内部文字显示

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