本篇文章将给大家分享一个创建渐变颜色按钮的效果，内容很详细，有感兴趣的朋友可以看一看具体内容。
话不多说，我们直接进入正题~
渐变按钮代码如下：
button-gradient.css（css文件）
.gradientButton{ border:1px solid #ff6a00; width:100px; height:28px; background:linear-gradient(to bottom, #fcffa2,#fbb700);/*设置按钮为渐变颜色*/}button-gradient.html（html文件）
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html><html xmlns=" <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" type="text/css" href="button-gradient.css" /> </head> <body> <p><button type="submit" class="gradientButton">Button</button></p> <hr /> </body> </html>
渐变色按钮效果如下：
带图标的渐变按钮
此代码在渐变按钮上显示一个图标。
代码如下：
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文件）
<!DOCTYPE html><html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" type="text/css" href="image-button-gradient.css" /> </head> <body> <button class="flatbutton"><span id="buttonImage"></span></button> </body> </html>
说明：它与前一个字符串标题的渐变按钮几乎相同。为了显示图像，在按钮标记中描述了span标记。
效果如下：
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）