Gradient Buttons

Gradient Buttons是什么？

Gradient Buttons是一个给网页设计师和前端开发者打造的、 CSS 渐变按钮样式资源库，里面收录了上百种不同风格、不同配色（包括扁平化按钮、Material Design 等按钮设计）的渐变按钮样式。你可以直接复制按钮的完整 CSS 代码、然后粘贴到你的项目中。

它的主要功能

• 海量渐变按钮样式：里面收录了几百个不同配色的不同风格的 Css 渐变按钮样式，从扁平化按钮（Flat）、Material Design 按钮一直到双色按钮（Double Color）。
• 一键复制代码：每个渐变按钮都附带完整的 css 代码，你需要做的只是在对应的按钮图片上点击一下就复制，直接粘贴到你的 html / css 项目里。
• 多种配色组合：提供两色渐变（Two Color Combinations）等多种配色方案，方便快速找到适合的视觉效果。
• 即时预览：用鼠标悬停（Hover）按钮来查看其动态效果和变化，便于进行挑选。

适用人群

• 网页设计师：快速获取可用的渐变按钮样式。
• 前端开发者：节省手写 CSS 渐变代码的时间。
• UI/UX 设计师：为界面增加色彩层次与视觉吸引力。

Gradient Buttons的使用教程 

1. 打开网站：访问Gradient Buttons官网，首页会显示大量不同配色、不同风格的渐变按钮示例。

2. 浏览按钮样式：页面中展示了许多样式的 CSS 渐变按钮，包括扁平化、Material Design、双色、等等；将鼠标悬浮（Hover）在上，可以提前预览它的动态效果。

3. 选择喜欢的按钮：找到你喜欢的渐变按钮样式，每个按钮都已经预设好渐变背景、圆角、阴影等样式。

4. 一键复制代码：点击按钮下方的 复制（Copy） 按钮，系统会把完整 HTML/CSS 代码复制到剪贴板。例如代码含有类似如下这个 CSS 渐变写法：

background: linear-gradient(to right, #ff7e5f, #feb47b);
border: none;
color: white;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;

将代码粘贴到你的项目文件中即可使用。