文章目录效果如下：Html代码：CSS代码：经常有人在下载『Weisay Simple』这个主题的时候问我，上面的下载按钮是不是用的什么插件。这只是我刚刚开始学习CSS3的时候写的，其实很简单的，就运用了CSS最基础的圆角border-radius和线性渐变linear-gradient，其他还真没有什么特别的。
一直有人希望我分享，其实这个东西查看下源代码，再查看下CSS就一目了然了，鉴于最近更新过少，就勉强算上一篇。
记得写这个时候还在用 PJBlog，当时做『Apple Style』这个主题，苹果风格的模仿，顺带就出了这个东东，当然后面也稍稍优化了下，Chrome、FireFox、Opera、IE10下效果是可以的，IE9不支持渐变，其他的不支持CSS3的就更不用说了，好了，下面看代码。
效果如下： DownLoadHtml代码： 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;}写完收工，是不是很简单。