CSS3下载渐变按钮制作-威言威语

CSS3下载渐变按钮制作

William2012-02-27 22:33设计22,379次阅读50条评论

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

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

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

效果如下：

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;}

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

本文固定链接: https://www.weisay.com/blog/css3-download-button.html | 威言威语

CSS3下载渐变按钮制作：目前有 50 条评论

30楼
越读者：

我做的效果怎么没有你的好看呢？

2013-09-01 17:01 回复
29楼
鹏丽：

不错，值得借鉴

2012-12-06 13:33 回复
28楼
观海：

弱弱的问下，这个能否弄个插件，放到文章编辑器的工具栏上，这样方便很多。现在这样，每次是不是都要把编辑器切换到html格式，然后粘贴代码，再切换回到所见即所得编辑模式，这样比较麻烦。

还有个问题，这个CSS代码，放到主题的style.css里面的哪个位置？是随便吗？

老大，给讲下吧。等着用用呢。

2012-07-06 23:36 回复
- William文章作者：
  
  这只是个小功能而已，也没见多复杂的，随便放CSS哪里。
  
  2012-07-09 16:20 回复
27楼
淘创：

好像ie6不能出效果

2012-06-18 18:12 回复
26楼
零下零度：

弱弱的说下。。。那个html代码添加到那个文件里边？？？文章发布页面是那个？？？

2012-05-29 18:28 回复
- 混乱羽翼：
  
  额，写在日志里面呀，你需要加入下载按钮的位置咯
  
  2012-05-29 23:00 回复
  - 零下零度：
    
    明白了，只是太大了点，看着好雷人啊！
    
    2012-05-30 00:24 回复
25楼
好玩吧：

代码不错，但是不支持IE6-7-8-9，介是个大问题啊。。。

2012-05-29 16:29 回复
24楼
王叨叨：

按钮确实不错，建议把箭头也用样式写出来，这样又节省了一张图片！

2012-03-16 23:25 回复
- William文章作者：
  
  哈哈，想法不錯，不過主要還是考慮IE下面的顯示效果，不然就不知道是什麼了
  
  2012-03-17 11:36 回复
  - 王叨叨：
    
    其实我说错了，箭头应该可以用html代码写出来用样式控制下大小就可以了，例如这样“↓”！
    
    2012-03-17 11:48 回复
23楼
NONO：

我以为那是一张图片呢厉害

2012-03-10 16:00 回复
22楼
olli：

弱弱的问一句这个代码怎么用啊

2012-03-09 13:50 回复
- William文章作者：
  
  弱弱的回答下，html是发布文章里面，css添加到主题的css里面。
  
  2012-03-09 16:39 回复
21楼
ruantoo：

大哥，这个评论框怎么加大啊，，，太小了。。。

2012-03-06 22:25 回复
- ruantoo：
  
  额自己css 搞定了，，啥时候把你那个图片插件共享下，，
  
  2012-03-06 22:37 回复
  - William文章作者：
    
    已经提供下载 https://www.weisay.com/blog/auto-highslide.html
    
    2012-03-08 19:03 回复
20楼
ah伤星：

威哥学CSS有什么书籍推荐不

2012-03-03 00:48 回复
- William文章作者：
  
  我基本没看什么CSS的书籍，基本就是看人家写的代码，然后自己写，不懂的就百度，错位啊什么的就自己找原因，怎么用hack，写写你就会了，css入门算是很简单的。
  
  2012-03-08 14:13 回复
19楼
水缘泡泡：

晚上加在自己博客上试试！

2012-03-02 13:59 回复
- William文章作者：
  
  哈哈，也装Windows8了啊，我也装好了
  
  2012-03-02 14:07 回复
18楼
SYPOPO：

过来学习

2012-03-02 13:26 回复
17楼
byhard：

当时想模仿一个却怎么也搞不出来，这个好啊。

2012-03-01 17:23 回复
16楼
彭涛雅阁：

不论多么华丽的东西，后面肯定有一堆的代码。这个在计算机的世界里已经不是稀罕事。

2012-03-01 15:42 回复
- William文章作者：
  
  哈哈，CSS代码并不复杂，负责的是对设计的思考。
  
  2012-03-01 16:38 回复
15楼
weiinn：

威哥，wordpress中写代码，你是用的什么插件呢？

2012-03-01 14:46 回复
- William文章作者：
  
  SyntaxHighlighter Evolved
  
  2012-03-01 14:49 回复
14楼
朱定聪：

很华丽的按钮~~

2012-03-01 07:59 回复
13楼
西安金蝶软件：

这个东西是要收藏的

2012-03-01 00:08 回复
12楼
陶也：

说实话，CS3下面用那么多代码就为了实现一个圆角，真的没有使用一张背景图片来得实在啊

2012-02-29 22:24 回复
- William文章作者：
  
  呵呵，如果新式浏览器在CSS3上都支持共有属性，代码就简单多了。
  
  2012-02-29 22:58 回复
11楼
foolor：

看到一大堆代码就头疼，不懂，以后有需要在照着加上

2012-02-29 21:42 回复
- William文章作者：
  
  呵呵，有时候会用就行。
  
  2012-02-29 22:56 回复
10楼
TC：

哈哈，你一说简单，我就头大了。

2012-02-29 16:11 回复
- William文章作者：
  
  额，确实CSS代码都是初级的CSS3代码。
  
  2012-02-29 17:17 回复
9楼
wmtimes：

是这样子的。

2012-02-29 00:51 回复
8楼
竹海听涛：

我是来打酱油的

2012-02-28 19:27 回复
7楼
汶海洳：

增加美观。藏着以后用了。不懂CSS。

2012-02-28 13:41 回复
6楼
龙城瓶子：

这么长的代码
还说简单。。。

2012-02-28 11:34 回复
- William文章作者：
  
  主要是各个浏览器都是自己的私有属性，所以要挨个定义，真希望他们都能支持公共属性，那么代码就简洁多了。
  
  2012-02-28 12:26 回复
5楼
Lvtu：

说到PJ，我还在等你的PJ呢？

2012-02-28 11:34 回复
- William文章作者：
  
  现在连WordPress都没时间整了
  
  2012-02-28 12:25 回复
4楼
BlueGood：

终于放出来了哈，我很早就看你源码给扒出来了嘻嘻~~~

2012-02-28 10:08 回复
- William文章作者：
  
  哈哈，懂的不难，难的不懂。
  
  2012-02-28 12:24 回复
地板
andychow1989：

终于更新博客啦等好久了啦

2012-02-27 23:26 回复
- William文章作者：
  
  呵呵，最近有点小忙
  
  2012-02-28 09:27 回复
板凳
binkery：

不错。不过我对web前端实在不感冒啊，虽然也写过一阵子，但毕竟不专业啊。一直用博主的模板呢。加油！！！

2012-02-27 23:14 回复
- William文章作者：
  
  呵呵，前端对于我来说只是爱好而已，有时间有写点玩玩。
  
  2012-02-28 09:27 回复
沙发
snowinmay：

收藏了~

2012-02-27 22:54 回复

发表评论

30楼

越读者：

我做的效果怎么没有你的好看呢？

2013-09-01 17:01 回复

29楼

鹏丽：

不错，值得借鉴

2012-12-06 13:33 回复

28楼

观海：

弱弱的问下，这个能否弄个插件，放到文章编辑器的工具栏上，这样方便很多。现在这样，每次是不是都要把编辑器切换到html格式，然后粘贴代码，再切换回到所见即所得编辑模式，这样比较麻烦。

还有个问题，这个CSS代码，放到主题的style.css里面的哪个位置？是随便吗？

老大，给讲下吧。等着用用呢。

2012-07-06 23:36 回复

William文章作者：

这只是个小功能而已，也没见多复杂的，随便放CSS哪里。

2012-07-09 16:20 回复

27楼

淘创：

好像ie6不能出效果

2012-06-18 18:12 回复

26楼

零下零度：

弱弱的说下。。。那个html代码添加到那个文件里边？？？文章发布页面是那个？？？

2012-05-29 18:28 回复

混乱羽翼：

额，写在日志里面呀，你需要加入下载按钮的位置咯

2012-05-29 23:00 回复
- 零下零度：
  
  明白了，只是太大了点，看着好雷人啊！
  
  2012-05-30 00:24 回复

25楼

好玩吧：

代码不错，但是不支持IE6-7-8-9，介是个大问题啊。。。

2012-05-29 16:29 回复

24楼

王叨叨：

按钮确实不错，建议把箭头也用样式写出来，这样又节省了一张图片！

2012-03-16 23:25 回复

William文章作者：

哈哈，想法不錯，不過主要還是考慮IE下面的顯示效果，不然就不知道是什麼了

2012-03-17 11:36 回复
- 王叨叨：
  
  其实我说错了，箭头应该可以用html代码写出来用样式控制下大小就可以了，例如这样“↓”！
  
  2012-03-17 11:48 回复

23楼

NONO：

我以为那是一张图片呢厉害

2012-03-10 16:00 回复

22楼

olli：

弱弱的问一句这个代码怎么用啊

2012-03-09 13:50 回复

William文章作者：

弱弱的回答下，html是发布文章里面，css添加到主题的css里面。

2012-03-09 16:39 回复

21楼

ruantoo：

大哥，这个评论框怎么加大啊，，，太小了。。。

2012-03-06 22:25 回复

ruantoo：

额自己css 搞定了，，啥时候把你那个图片插件共享下，，

2012-03-06 22:37 回复
- William文章作者：
  
  已经提供下载 https://www.weisay.com/blog/auto-highslide.html
  
  2012-03-08 19:03 回复

20楼

ah伤星：

威哥学CSS有什么书籍推荐不

2012-03-03 00:48 回复

William文章作者：

我基本没看什么CSS的书籍，基本就是看人家写的代码，然后自己写，不懂的就百度，错位啊什么的就自己找原因，怎么用hack，写写你就会了，css入门算是很简单的。

2012-03-08 14:13 回复

19楼

水缘泡泡：

晚上加在自己博客上试试！

2012-03-02 13:59 回复

William文章作者：

哈哈，也装Windows8了啊，我也装好了

2012-03-02 14:07 回复

18楼

SYPOPO：

过来学习

2012-03-02 13:26 回复

17楼

byhard：

当时想模仿一个却怎么也搞不出来，这个好啊。

2012-03-01 17:23 回复

16楼

彭涛雅阁：

不论多么华丽的东西，后面肯定有一堆的代码。这个在计算机的世界里已经不是稀罕事。

2012-03-01 15:42 回复

William文章作者：

哈哈，CSS代码并不复杂，负责的是对设计的思考。

2012-03-01 16:38 回复

15楼

weiinn：

威哥，wordpress中写代码，你是用的什么插件呢？

2012-03-01 14:46 回复

William文章作者：

SyntaxHighlighter Evolved

2012-03-01 14:49 回复

14楼

朱定聪：

很华丽的按钮~~

2012-03-01 07:59 回复

13楼

西安金蝶软件：

这个东西是要收藏的

2012-03-01 00:08 回复

12楼

陶也：

说实话，CS3下面用那么多代码就为了实现一个圆角，真的没有使用一张背景图片来得实在啊

2012-02-29 22:24 回复

William文章作者：

呵呵，如果新式浏览器在CSS3上都支持共有属性，代码就简单多了。

2012-02-29 22:58 回复

11楼

foolor：

看到一大堆代码就头疼，不懂，以后有需要在照着加上

2012-02-29 21:42 回复

William文章作者：

呵呵，有时候会用就行。

2012-02-29 22:56 回复

10楼

TC：

哈哈，你一说简单，我就头大了。

2012-02-29 16:11 回复

William文章作者：

额，确实CSS代码都是初级的CSS3代码。

2012-02-29 17:17 回复

9楼

wmtimes：

是这样子的。

2012-02-29 00:51 回复

8楼

竹海听涛：

我是来打酱油的

2012-02-28 19:27 回复

7楼

汶海洳：

增加美观。藏着以后用了。不懂CSS。

2012-02-28 13:41 回复

6楼

龙城瓶子：

这么长的代码
还说简单。。。

2012-02-28 11:34 回复

William文章作者：

主要是各个浏览器都是自己的私有属性，所以要挨个定义，真希望他们都能支持公共属性，那么代码就简洁多了。

2012-02-28 12:26 回复

5楼

Lvtu：

说到PJ，我还在等你的PJ呢？

William文章作者：

现在连WordPress都没时间整了

2012-02-28 12:25 回复

4楼

BlueGood：

终于放出来了哈，我很早就看你源码给扒出来了嘻嘻~~~

2012-02-28 10:08 回复

William文章作者：

哈哈，懂的不难，难的不懂。

2012-02-28 12:24 回复

地板

andychow1989：

终于更新博客啦等好久了啦

2012-02-27 23:26 回复

William文章作者：

呵呵，最近有点小忙

2012-02-28 09:27 回复

板凳

binkery：

不错。不过我对web前端实在不感冒啊，虽然也写过一阵子，但毕竟不专业啊。一直用博主的模板呢。加油！！！

2012-02-27 23:14 回复

William文章作者：

呵呵，前端对于我来说只是爱好而已，有时间有写点玩玩。

2012-02-28 09:27 回复

沙发

snowinmay：

收藏了~

2012-02-27 22:54 回复

威言威语