「其他分享」CSS3下载渐变按钮制作-Eswlnk Blog
智能摘要 AI
本文介绍了如何使用CSS3制作一个简单的下载按钮，该按钮具有圆角和线性渐变效果。作者表示，该效果主要通过`border-radius`和`linear-gradient`实现，并适用于多种浏览器。按钮在不同状态下的背景颜色和边框会有所变化，以增强用户体验。作者分享了HTML和CSS代码，强调其简单易懂，适合初学者学习。原文标题为「其他分享」CSS3下载渐变按钮制作，版权归属作者所有。

经常有人在下载「WordPress」主题的时候问我，上面的下载按钮是不是用的什么插件。这只是我刚刚开始学习CSS3的时候写的，其实很简单的，就运用了CSS最基础的圆角border-radius和线性渐变linear-gradient，其他还真没有什么特别的。

一直有人希望我分享，其实这个东西查看下源代码，再查看下CSS就一目了然了，鉴于最近更新过少，就勉强算上一篇。

记得写这个时候还在用 PJBlog，当时做『Apple Style』这个主题，苹果风格的模仿，顺带就出了这个东东，当然后面也稍稍优化了下，Chrome、FireFox、Opera、IE10下效果是可以的，IE9不支持渐变，其他的不支持CSS3的就更不用说了，好了，下面看代码。

效果如下

.vv_demo{width:200px; background-color: #3d3d3d; display: inline-block; padding:12px 25px 12px 25px; -moz-border-radius:6px; -webkit-border-radius: 10px; border-radius:10px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4); text-shadow: 1px 1px 1px rgba(0,0,0,0.25); background:-webkit-gradient(linear,left top,left bottom,from(rgba(59,59,59,0.4)),to(rgba(59,59,59,1))); background: -moz-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1)); background: -ms-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1)); background: -o-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1)); border:1px solid #9e9e9e; text-decoration:none; } .vv_demo span{font-family:”Verdana”;font-size:22px; line-height:32px; padding-left:8px; text-shadow: 0 1px #333; color:#f8f8f8;} .vv_demo:hover{background-color:#5c5c5c; background:-webkit-gradient(linear,left top,left bottom,from(rgba(59,59,59,1)),to(rgba(59,59,59,0.4))); background: -moz-linear-gradient(top, rgba(59,59,59,1), rgba(59,59,59,0.4)); background: -ms-linear-gradient(top, rgba(59,59,59,1), rgba(59,59,59,0.4)); background: -o-linear-gradient(top, rgba(59,59,59,1), rgba(59,59,59,0.4)); text-decoration:none; border:1px solid #777; } .vv_demo:active {background: #4a4a4a;} .v_demo{text-align: center; margin:10px 0 10px 0} .v_demo a:hover{text-decoration:none;}
DownLoad

Html代码

<div class="v_demo">
<a class="vv_demo" href="#" onfocus="this.blur()"><span>DownLoad</span><img src="/blog/logo/download.png" alt="" /></a>
</div>

CSS代码

.vv_demo{width:200px;
background-color: #3d3d3d;
display: inline-block;
padding:12px 25px 12px 25px;
-moz-border-radius:6px;
-webkit-border-radius: 10px;
border-radius:10px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
background:-webkit-gradient(linear,left top,left bottom,from(rgba(59,59,59,0.4)),to(rgba(59,59,59,1)));
background: -moz-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));
background: -ms-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));
background: -o-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));
border:1px solid #9e9e9e;
text-decoration:none;
}
 .vv_demo span{font-family:"Verdana";font-size:22px;
line-height:32px;
float:right;
padding-left:8px;
text-shadow: 0 1px #333;
color:#f8f8f8;}
 .vv_demo:hover{background-color:#5c5c5c;
background:-webkit-gradient(linear,left top,left bottom,from(rgba(59,59,59,1)),to(rgba(59,59,59,0.4)));
background: -moz-linear-gradient(top, rgba(59,59,59,1), rgba(59,59,59,0.4));
background: -ms-linear-gradient(top, rgba(59,59,59,1), rgba(59,59,59,0.4));
background: -o-linear-gradient(top, rgba(59,59,59,1), rgba(59,59,59,0.4));
text-decoration:none;
border:1px solid #777;
}
.vv_demo:active {background: #4a4a4a;}
.v_demo{text-align: center; margin:10px 0 10px 0}
.v_demo a:hover{text-decoration:none;}

写完收工，是不是很简单。

ESWINK , 版权所有丨如未注明 , 均为原创

原文标题:「其他分享」CSS3下载渐变按钮制作

「其他分享」CSS3下载渐变按钮制作-Eswlnk Blog