渐变按钮合集（6 款 CSS 渐变按钮源码）

效果演示（真实可交互）

演示区 6 款渐变按钮覆盖了主流视觉方向：①流动渐变适合品牌主色、②扫光适合 H5 落地页 CTA、③渐变描边适合需要克制的次按钮、④彩虹适合活动促销、⑤渐变文字适合导航链接、⑥立体渐变适合需要物理按压感的场景。全部 hover 可交互。

完整代码

① 流动渐变（背景 300% 宽度循环平移，形成流动感）：

.btn-flow {
  background: linear-gradient(90deg, #6c8cff, #b388ff, #ff6b8a, #6c8cff);
  background-size: 300% 100%;
  animation: flow 5s linear infinite;
}
@keyframes flow { to { background-position: 300% 0; } }

③ 渐变描边（双背景：内层实色 + 外层渐变，见边框即见渐变）：

.btn-border {
  background: #fff; color: #6c8cff; border: 2px solid transparent;
  background-image: linear-gradient(#fff, #fff),
    linear-gradient(120deg, #6c8cff, #b388ff, #ff6b8a);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

⑤ 渐变文字（background-clip: text 把渐变裁进字形里）：

.btn-text {
  color: transparent;
  background-image: linear-gradient(90deg, #6c8cff, #b388ff, #ff6b8a);
  -webkit-background-clip: text;
  background-clip: text;
}

②④⑥ 款与上述写法同源：扫光是伪元素高光位移、彩虹是首尾同色的大背景平移、立体是底部色块阴影加 :active 位移，完整样式见演示区 .gb-* 系列。注意 background-clip: text 需要 -webkit- 前缀以兼容 Safari。

参数说明

兼容性与性能

• 全部为纯 CSS，无 JS、无外部库，Chrome / Firefox / Safari / Edge 最新版全兼容
• ①④ 的 background-position 动画会轻微触发重绘，按钮尺寸小，性能可忽略
• ③ 的 background-clip: border-box 双背景技巧 IE 不支持，现代浏览器无碍
• 渐变按钮建议配合 prefers-reduced-motion 媒体查询关闭常驻动画，照顾动效敏感用户

常见问题

Q: 能商用吗？ 可以。本组件为粤喵自研，免费商用无需署名。

Q: 渐变流动看起来不平滑、有跳变？ 检查渐变首尾颜色是否一致（如 ④ 首尾都是 #ff6b8a），并且 background-size 与 background-position 的百分比要配套，否则循环点会闪烁。

Q: 渐变文字按钮点击没反馈？ 渐变文字没有背景色，按下状态不明显。可以叠加 :active 缩放（如 scale(.96)）或给按钮加一个半透明底，按压感更强。

Q: 能用在深色模式吗？ 可以，②④⑥ 的深色渐变本身适合深色主题；③ 的内层白色需要换成 #1c2442 之类深色，避免白框刺眼。