威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

CSS3下载渐变按钮制作

运用了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;}

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

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

您可能还会对这些文章感兴趣!

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

  1. 30楼
    越读者:Google Chrome 29.0.1547.62 Windows 7 x64 Edition

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

    2013-09-01 17:01 回复
  2. 29楼
    鹏丽Internet Explorer 8.0 Windows XP

    不错,值得借鉴 :grin:

    2012-12-06 13:33 回复
  3. 28楼
    观海:Google Chrome 19.0.1084.56 Windows 7

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

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

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

    2012-07-06 23:36 回复
    • WilliamGoogle Chrome 20.0.1132.47 Windows 7

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

      2012-07-09 16:20 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

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

快捷键:Ctrl+Enter