渐变边框按钮（渐变描边/流动渐变边/悬停填充 3 款源码）

效果演示（真实可交互）

渐变描边兼容性最好；流动渐变边支持现代浏览器

完整代码

HTML 结构：

<button class="gb-btn gb-padding">渐变描边</button>
<button class="gb-btn gb-flow">流动渐变边</button>
<button class="gb-btn gb-hover">悬停渐变填充</button>

CSS 核心代码：

/* 1 padding 双重背景法：内层实色裁出 2px 透明边 */
.gb-padding {
  border: 2px solid transparent;
  background:
    linear-gradient(#1b1f2e, #1b1f2e) padding-box,
    linear-gradient(120deg, #ff6b6b, #ffd93d, #4d96ff, #c084fc) border-box;
}

/* 2 流动渐变边：大尺寸背景平移 */
.gb-flow {
  border: 2px solid transparent;
  background:
    linear-gradient(#1b1f2e, #1b1f2e) padding-box,
    linear-gradient(90deg, #ff6b6b, #ffd93d, #6bcb77, #4d96ff, #c084fc, #ff6b6b) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: gb-flow-move 3s linear infinite;
}
@keyframes gb-flow-move { to { background-position: 0 0, 300% 0; } }

/* 3 悬停渐变填充 */
.gb-hover {
  border: 2px solid transparent; color: #ffb3c1;
  background:
    linear-gradient(#10121a, #10121a) padding-box,
    linear-gradient(135deg, #ff6b6b, #ffd93d) border-box;
}
.gb-hover:hover {
  color: #1a0a0d;
  background: linear-gradient(135deg, #ff6b6b, #ffd93d) padding-box,
    linear-gradient(135deg, #ff6b6b, #ffd93d) border-box;
}

参数说明

兼容性与性能

• 三种实现全部基于 background 多层渐变 + background-clip，兼容 Chrome / Firefox / Safari / Edge 全系现代浏览器，无需图片、无需 SVG
• 流动渐变边只动画 background-position，属于合成层属性，性能开销小；若卡片较多可改用 will-change: background-position 提示浏览器
• 与 border-image 方案相比，双重背景法支持圆角、支持透明度背景，且可叠加 hover 过渡，是社区最推荐的渐变描边写法
• 全部零 JS 零依赖，直接复制到项目即可使用

常见问题

Q: 为什么按钮里看不到渐变？ 检查是否漏写 border: 2px solid transparent，border-box 层的渐变要靠透明边框区才露出来；另外 background 的顺序不能反，padding-box 要在前面。

Q: 能做出带渐变描边的圆角胶囊按钮吗？ 可以，把 border-radius 调大到按钮高度一半即可，双重背景法天然支持圆角，不会像 border-image 那样被拉伸变形。

Q: 渐变描边可以加 hover 变色吗？ 可以，hover 时整体替换 background 的渐变颜色即可，配合 transition: background .3s 需要同时过渡两组渐变，建议直接改颜色变量实现平滑切换。

Q: 支持透明背景的渐变边框吗？ 支持，把 padding-box 那层实色改成 rgba(0,0,0,0) 即可得到镂空渐变描边按钮。