直接为button设置background-image: linear-gradient()即可实现渐变，需搭配fallback色background-color以兼容旧浏览器，避免使用background简写，并通过background-size与background-position优化hover动画。
button 的 background-image 用 linear-gradient() 实现渐变
直接给 <button></button> 元素加 background-image: linear-gradient(...) 就行，不用额外包裹或伪元素。CSS 渐变本质是图像，所以它和纯色背景一样可直接用于 background 系列属性。
常见错误是只写 background-color —— 它不支持渐变，写了会被 background-image 覆盖，且无法控制方向和色标。
-
linear-gradient(45deg, #ff6b6b, #4ecdc4)：45 度方向，从左下到右上过渡 -
linear-gradient(to right, #3498db, #2c3e50)：水平从左到右，语义更清晰 -
linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)：带百分比定位色标，适合精细控制停点位置
必须同时设置 background-color 或 fallback 色
渐变在旧浏览器（如 IE9 及以下）完全不支持，background-image 会失效，按钮变成透明——用户点不到、看不清。不能依赖渐变本身作为唯一视觉表达。
正确做法是把单色设为 background-color，再叠一层 background-image。现代浏览器会优先渲染 background-image，覆盖掉底色；老浏览器忽略 background-image，只显示 background-color。
- 写法顺序无所谓，但推荐先写
background-color，再写background-image，逻辑更直观 - 别用
background: linear-gradient(...) #fff这种简写——它会清空所有其他 background 层（比如background-size或background-position），容易踩坑 - 如果用了
background简写，记得补全所有需要的子属性，否则可能丢失圆角或内边距表现
hover 动画要避免重绘，用 background-position 模拟位移
直接在 :hover 里改 linear-gradient 的角度或颜色，会触发整个背景重绘，动画卡顿。更轻量的做法是固定渐变方向，只动它的起始位置。
原理：用 background-size 设一个比按钮宽高的大范围（比如 200% 200%），再用 background-position 控制“窗口”看到哪一段，hover 时平滑移动这个位置。
-
background-size: 200% 200%是关键，没它就动不了 -
background-position: 0% 0%对应左上角起点，background-position: 100% 100%切到右下角区域 - 配合
transition: background-position 0.3s ease，就能实现丝滑滑入效果
移动端点击反馈和可访问性别漏掉
渐变按钮在 iOS Safari 或 Android Chrome 上，点击时默认没有水波纹或压感反馈，用户会觉得“没按下去”。这不是 bug，是 CSS 默认行为。
解决方法不是加 JS，而是用 ::after 伪元素 + opacity 动画模拟按下态，或者更稳妥地——保留 outline 或加 box-shadow: 0 0 0 2px rgba(0,0,0,.2) 做键盘聚焦提示。
- 别用
outline: none一删了之，这会让键盘用户无法识别焦点位置 - 渐变对比度不够时（比如浅灰到浅蓝），WCAG AA 标准可能不达标，建议用 WebAIM 对比度检查工具 测一下文字和背景的组合
- 如果按钮含图标，确保
background-image不遮挡图标，必要时用padding预留空间，而不是靠margin推开
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
