当前位置: 首页 > 设计 > 正文
avatar

运用了CSS最基础的圆角border-radius和线性渐变linear-gradient,打照一个非常个性美观的下载按钮,代码并不复杂,重要还是我们对按钮的构思,对图片渐变的理解。

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

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

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

效果如下:
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;}

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

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

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

  1. avatar
    30楼
    越读者 Google Chrome Windows

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

    2013-09-01 17:01 [回复]
  2. avatar
    29楼
    鹏丽 Internet Explorer Windows

    不错,值得借鉴 :grin:

    2012-12-06 13:33 [回复]
  3. avatar
    28楼
    观海 Google Chrome Windows

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

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

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

    2012-07-06 23:36 [回复]
    • avatar
      William Google Chrome Windows

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

      2012-07-09 16:20 [回复]
  4. avatar
    27楼
    淘创 Unknow Browser Unknow Os

    好像ie6不能出效果

    2012-06-18 18:12 [回复]
  5. avatar
    26楼
    零下零度 Mozilla Firefox Windows

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

    2012-05-29 18:28 [回复]
    • 额,写在日志里面呀,你需要加入下载按钮的位置咯

      2012-05-29 23:00 [回复]
  6. avatar
    25楼
    好玩吧 Internet Explorer Windows

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

    2012-05-29 16:29 [回复]
  7. avatar
    24楼
    王叨叨 Google Chrome Windows

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

    2012-03-16 23:25 [回复]
    • avatar
      William Safari iPhone

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

      2012-03-17 11:36 [回复]
      • 其实我说错了,箭头应该可以用html代码写出来用样式控制下大小就可以了,例如这样“↓”!

        2012-03-17 11:48 [回复]
  8. avatar
    23楼
    NONO Google Chrome Windows

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

    2012-03-10 16:00 [回复]
  9. avatar
    22楼
    olli Mozilla Firefox Windows

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

    2012-03-09 13:50 [回复]
    • avatar
      William Google Chrome Windows

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

      2012-03-09 16:39 [回复]
  10. avatar
    21楼
    ruantoo Google Chrome Windows

    :cool: 大哥, 这个评论框怎么加大啊,,, 太小了。。。

    2012-03-06 22:25 [回复]
  11. avatar
    20楼
    ah伤星 Google Chrome Windows

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

    2012-03-03 00:48 [回复]
    • avatar
      William Google Chrome Windows

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

      2012-03-08 14:13 [回复]
  12. avatar
    19楼
    水缘泡泡 Internet Explorer Windows

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

    2012-03-02 13:59 [回复]
    • avatar
      William Internet Explorer Windows

      哈哈,也装Windows8了啊,我也装好了 :wink:

      2012-03-02 14:07 [回复]
  13. avatar
    18楼
    SYPOPO Mozilla Firefox Windows

    过来学习

    2012-03-02 13:26 [回复]
  14. avatar
    17楼
    byhard Google Chrome Windows

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

    2012-03-01 17:23 [回复]
  15. avatar
    16楼
    彭涛雅阁 Internet Explorer Windows

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

    2012-03-01 15:42 [回复]
    • avatar
      William Google Chrome Windows

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

      2012-03-01 16:38 [回复]
  16. avatar
    15楼
    weiinn Mozilla Firefox Windows

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

    2012-03-01 14:46 [回复]
    • avatar
      William Google Chrome Windows

      SyntaxHighlighter Evolved

      2012-03-01 14:49 [回复]
  17. avatar
    14楼
    朱定聪 Google Chrome Windows

    :???: 很华丽的按钮~~

    2012-03-01 07:59 [回复]
  18. 这个东西是要收藏的

    2012-03-01 00:08 [回复]
  19. avatar
    12楼
    陶也 搜狗浏览器 Windows

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

    2012-02-29 22:24 [回复]
    • avatar
      William Safari iPhone

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

      2012-02-29 22:58 [回复]
  20. avatar
    11楼
    foolor Mozilla Firefox Windows

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

    2012-02-29 21:42 [回复]
    • avatar
      William Safari iPhone

      呵呵,有时候会用就行。

      2012-02-29 22:56 [回复]
  21. avatar
    10楼
    TC Mozilla Firefox Windows

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

    2012-02-29 16:11 [回复]
    • avatar
      William Google Chrome Windows

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

      2012-02-29 17:17 [回复]
  22. avatar
    9楼
    wmtimes Google Chrome Windows

    是这样子的。

    2012-02-29 00:51 [回复]
  23. avatar
    8楼
    竹海听涛 Internet Explorer Windows

    我是来打酱油的

    2012-02-28 19:27 [回复]
  24. avatar
    7楼
    汶海洳 360安全浏览器 Windows

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

    2012-02-28 13:41 [回复]
  25. avatar
    6楼
    龙城瓶子 Internet Explorer Windows

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

    2012-02-28 11:34 [回复]
    • avatar
      William Google Chrome Windows

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

      2012-02-28 12:26 [回复]
  26. avatar
    5楼
    Lvtu Google Chrome Windows

    说到PJ,我还在等你的PJ呢? :oops:

    2012-02-28 11:34 [回复]
    • avatar
      William Google Chrome Windows

      现在连WordPress都没时间整了 :shock:

      2012-02-28 12:25 [回复]
  27. avatar
    4楼
    BlueGood Google Chrome Windows

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

    2012-02-28 10:08 [回复]
    • avatar
      William Google Chrome Windows

      哈哈,懂的不难,难的不懂。 :lol:

      2012-02-28 12:24 [回复]
  28. avatar
    地板
    andychow1989 搜狗浏览器 Windows

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

    2012-02-27 23:26 [回复]
    • avatar
      William Google Chrome Windows

      呵呵,最近有点小忙

      2012-02-28 09:27 [回复]
  29. avatar
    板凳
    binkery Google Chrome Windows

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

    2012-02-27 23:14 [回复]
    • avatar
      William Google Chrome Windows

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

      2012-02-28 09:27 [回复]
  30. avatar
    沙发
    snowinmay 世界之窗浏览器 Windows

    收藏 了~

    2012-02-27 22:54 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter