用 linear-gradient 实现高级按钮渐变需选对方向（如135deg模拟左上光源）、控色停点（如20%主色+80%浅色增光泽）、配悬停反向渐变与点击缩放反馈，并确保文字对比度≥4.5:1、禁用锥形渐变。
直接用 background-image: linear-gradient() 就能给按钮加渐变，关键不在“会不会”，而在“怎么选方向、颜色和交互逻辑”——它决定了按钮是看着高级，还是像贴了张劣质贴纸。
选对方向，让光影有逻辑
渐变方向不是随便写的，它模拟真实光源。多数界面默认光源在左上角，所以按钮常用 135deg（从左上到右下）或 to bottom right：
-
linear-gradient(135deg, #4facfe, #00f2fe)—— 蓝青过渡，清爽有科技感 -
linear-gradient(to bottom, #ff6b6b, #4ecdc4)—— 垂直渐变适合宽按钮，稳重不抢戏 - 避免用
to left或270deg这类反常识方向，除非你刻意营造特殊氛围
控制颜色停点，避免“脏”和“平”
两个颜色硬切容易显廉价；加停点就能做出光泽感。比如让主色在 20% 处就铺满，再用浅色过渡到 80%：
-
linear-gradient(to right, #5a67d8 20%, #7080ff 80%)—— 按钮左侧饱满，右侧微亮，像镀了层光 - 想做哑光质感？把第二个色设为同色系但降低饱和度：
#5a67d8 0%, #6a77e8 100% - 慎用三色以上渐变，除非按钮足够大，否则易显杂乱
搭配悬停与点击反馈，让按钮“活起来”
静态渐变只是起点，状态变化才体现专业度：
-
悬停时反向渐变：
:hover { background: linear-gradient(to right, #7080ff, #5a67d8); }—— 视觉上像被轻轻点亮 -
按下时轻微缩放+位移：
:active { transform: scale(0.98) translateY(1px); }—— 模拟物理按压感 - 加一层柔和阴影：
box-shadow: 0 2px 8px rgba(112, 128, 255, 0.2)，强化立体轮廓
注意可访问性与性能底线
再好看的渐变，也不能牺牲基础体验：
- 文字颜色必须和渐变背景保持至少 4.5:1 的对比度（可用浏览器 DevTools 的“无障碍”面板检查）
- 避免在小按钮（如图标按钮）上用复杂渐变，优先保证识别速度
- 不用
conic-gradient做常规按钮背景——它渲染开销高，且易分散注意力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
