本篇文章将给大家分享一个创建渐变颜色按钮的效果，内容很详细，有感兴趣的朋友可以看一看具体内容。
话不多说，我们直接进入正题~
渐变按钮代码如下：
button-gradient.css（css文件）
.gradientButton{ border:1px solid #ff6a00; width:100px; height:28px; background:linear-gradient(to bottom, #fcffa2,#fbb700);}button-gradient.html（html文件）
立即学习“前端免费学习笔记（深入）”；
lns="
渐变色按钮效果如下：
带图标的渐变按钮
此代码在渐变按钮上显示一个图标。
代码如下：
image-button-gradient.css（css文件）
#buttonImage { background-image:url('/img/search.png'); display:inline-block; margin-top:2px; width:16px; height:16px;}.flatbutton{ border:1px solid #3079ed; width:100px; height:28px; background:linear-gradient(to bottom, #9bcfff,#4683ea); }image-button-gradient.html（HTML文件）
说明：它与前一个字符串标题的渐变按钮几乎相同。为了显示图像，在按钮标记中描述了span标记。
效果如下：
