CSS渐变按钮主要使用 linear-gradient() 或 radial-gradient() 函数作为 background 属性值。基础语法：
background: linear-gradient(to right, #ff6b6b, #feca57);
配合 border: none、border-radius、padding 等属性，即可创建一个美观的渐变按钮。线性渐变支持8个方向关键词（to right, to bottom等）以及角度值（如45deg）。

linear-gradient（线性渐变）：颜色沿直线方向过渡，支持角度和方向关键词，适合大多数按钮设计。
radial-gradient（径向渐变）：颜色从中心点向外扩散，呈圆形或椭圆形过渡。适合需要聚光或立体感的设计。
两者可以互相替代，但视觉效果截然不同。线性渐变更现代简洁，径向渐变更有层次深度。

CSS渐变在现代浏览器中兼容性非常好：Chrome 26+、Firefox 16+、Safari 6.1+、Edge 12+、Opera 15+ 均完整支持。IE10+ 也支持基础线性渐变（需使用 -ms- 前缀）。移动端iOS Safari 6.1+、Android Browser 4.4+ 均支持。覆盖率超过98%。如需兼容更旧浏览器，建议提供纯色fallback背景。

使用 :hover 伪类即可。常见悬停效果包括：
• 上浮：transform: translateY(-3px); 配合增强阴影
• 变暗：filter: brightness(0.85);
• 缩放：transform: scale(1.05);
• 发光：增大 box-shadow 的模糊半径和透明度
记得在基础样式中添加 transition: all 0.3s ease; 以确保悬停效果平滑过渡。

文字颜色应与渐变背景形成足够对比度。一般原则：
• 深色渐变（如紫蓝、深绿）→ 使用白色文字
• 浅色渐变（如粉白、浅黄）→ 使用深色文字（#333或#222）
本工具会自动计算两个颜色的平均亮度，智能选择白色或深色文字。也可通过 text-shadow 增强文字可读性。

提升渐变按钮吸引力的技巧：
• 微阴影：使用与渐变颜色协调的阴影（如取起始色的半透明版本）
• 大圆角：25-50px的圆角让按钮更友好
• 悬停动效：上浮3-5px配合阴影加深，给用户即时反馈
• 色彩搭配：选择色相接近或互补的颜色对，避免冲突
• 足够的内边距：上下12-16px，左右24-40px，让按钮呼吸
• 字体加粗：font-weight 600+ 提升视觉重量感