CSS3下载渐变按钮制作

甜菜

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

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

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

效果如下：

看不到效果哦，效果请见：http://www.weisay.com/blog/css3-download-button.html
Html代码：

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

复制代码

CSS代码：

1. 
   
2. .vv_demo{width:200px;
   
3. background-color: #3d3d3d;
   
4. display: inline-block;
   
5. padding:12px 25px 12px 25px;
   
6. -moz-border-radius:6px;
   
7. -webkit-border-radius: 10px;
   
8. border-radius:10px;
   
9. -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
   
10. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    
11. text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
    
12. background:-webkit-gradient(linear,left top,left bottom,from(rgba(59,59,59,0.4)),to(rgba(59,59,59,1)));
    
13. background: -moz-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));
    
14. background: -ms-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));
    
15. background: -o-linear-gradient(top, rgba(59,59,59,0.4), rgba(59,59,59,1));
    
16. border:1px solid #9e9e9e;
    
17. text-decoration:none;
    
18. }
    
19. .vv_demo span{font-family:"Verdana";font-size:22px;
    
20. line-height:32px;
    
21. float:right;
    
22. padding-left:8px;
    
23. text-shadow: 0 1px #333;
    
24. color:#f8f8f8;}
    
25. .vv_demo:hover{background-color:#5c5c5c;
    
26. background:-webkit-gradient(linear,left top,left bottom,from(rgba(59,59,59,1)),to(rgba(59,59,59,0.4)));
    
27. background: -moz-linear-gradient(top, rgba(59,59,59,1), rgba(59,59,59,0.4));
    
28. background: -ms-linear-gradient(top, rgba(59,59,59,1), rgba(59,59,59,0.4));
    
29. background: -o-linear-gradient(top, rgba(59,59,59,1), rgba(59,59,59,0.4));
    
30. text-decoration:none;
    
31. border:1px solid #777;
    
32. }
    
33. .vv_demo:active {background: #4a4a4a;}
    
34. .v_demo{text-align: center; margin:10px 0 10px 0}
    
35. .v_demo a:hover{text-decoration:none;}

复制代码

写完收工，是不是很简单。
PS：CSS代码加在主题的CSS里，HTML代码加在文章里。href="#" 的#是链接地址，图片在<img src="/blog/logo/download.png" alt="" /></a>，请自行更改路径（这不是固定目录，从网站的根目录开始写），图片下载：

安小白

啦啦啦。。沙发。。

真坑钠

我小白表示不懂