继续我的前一篇文章为了向网页设计师展示CSS3的强大功能，我现在将与你分享一个只用CSS就能制作一个漂亮的动作调用按钮的方法。和上一篇文章一样，我将采用之前的Photoshop教程如何在Photoshop中创建一个光滑和干净的按钮由Six Revisions首席编辑，Jacob Gube，并尽我所能在不使用图形编辑器的情况下重新创建它。我认为这样做是最好的方式之一，以强调CSS3可以使我们作为网页设计师的工作更容易。
查看Photoshop教程，让我知道我有多接近重新创建它的最终产品。
现场演示CSS3号召行动按钮
这就是我们要做的。它实际上是实时的，所以请随意将鼠标悬停在按钮上(不过，单击它将带您进入Six Revisions首页)。如果你在下面看不到它，你可能禁用了iFrames，或者你使用的浏览器还不支持这些CSS3模块。
页内演示
“行动呼吁”按钮的截屏
下面是号召行动按钮应该看起来像(以及蓝色的悬停状态)。
基本HTML标记
好的，让我们从HTML开始。很简单，只要一个div类包含按钮和普通超链接元素.btn(“按钮”的简称)，将代表我们号召行动的按钮。多么好的提醒我们在CSS出现之前的生活是什么样子啊!
注意:的div在hyperlink元素周围并不是真正需要的，但是为了灵活性，有一个容器总是一个好主意。
.
基本的CSS
在这里，我们将添加我们的第一个CSS -只是一些按钮的正常和悬停状态的基本样式。注意:背景颜色稍后将被CSS3渐变所取代，但如果用户使用的浏览器不支持CSS3，那么有一个备份计划总是很好的做法。
A.btn{宽度:250px;填充:10px 25px 10px 25px;字体类型:Arial;字体大小:16 px;文字修饰:没有;颜色:# ffffff;background - color: # 98 ba3f;} a.btn:hover {background - color: # 245191;｝
给按钮一个文本阴影CSS属性
在这一步中，我们给我们的行动按钮文本一个微妙的文本阴影。这实际上不是CSS3，但它也不是一个高度使用的CSS属性。我们把颜色文本阴影属性对于正常状态和悬停状态(使用:徘徊伪类)。
A.btn {text-shadow: -1px 2px# 618926；} .btn:hover {text-shadow: -1px -1px 2px# 465 f97；｝
给按钮一个细边框
让我们为两个按钮状态添加一个1px的细边框，使按钮更有趣。
a.btn {边框:1px实体#618926;} a.btn:hover {边框:1px实体#0f2557;｝
因为到目前为止我们只使用了CSS2规范，这就是我们的行动号召按钮在旧浏览器中的样子(降级)。
用CSS3圆角
好吧，事情开始变得有趣了。我们将使用CSS3为按钮添加一个微妙的圆角效果。使用浏览器厂商的前缀(例如
-moz -对于Mozilla浏览器)，我们可以添加一个3px这个特性属性的.btn类，它将使按钮的角圆角化。提示:要了解更多关于CSS3的基础知识，以及为什么我们必须使用那些看起来很疯狂的供应商前缀，请查看我之前的文章你应该知道的CSS3技巧．
A.btn {border-radius: 3px;-moz-border-radius: 3 px;-webkit-border-radius: 3 px;} a.btn:hover {border-radius: 3px;-moz-border-radius: 3 px;-webkit-border-radius: 3 px;｝
变化不大，但看起来更有趣了。
同意吗?
添加CSS3渐变
在最后一步中，我们添加了真正使这个按钮变得生动的样式。我们实现了背景渐变，给按钮的特征光滑/现代外观。我们需要一个开始和结束渐变颜色，以及一个停止之间的颜色。
我承认，WebKit版本(影响苹果Safari和谷歌Chrome)看起来相当复杂。我见过许多为基于webkit的浏览器创建渐变的方法，但没有一种方法像Mozilla浏览器的方法那样简单。
A.btn {background: -moz-linear-gradient(#98ba40， #a6c250 35%， #618926);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#98ba40)，颜色停止(。35， #a6c250)，color-stop(1， #618926));} a.btn:hover {background: -moz-linear-gradient(#245192， #1e3b73 75%， #12295d);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#245192)，颜色停止(。75， #1e3b73)，color-stop(1， #12295d));｝
这是它应该看起来的样子(我想说它非常接近最初的样子Photoshop教程这是基于)。
所有的CSS现在在一起!
这是我们完整的CSS.btn类。
A.btn{宽度:250px;填充:10px 25px 10px 25px;字体类型:Arial;字体大小:16 px;文字修饰:没有;颜色:# ffffff;文字阴影:-1px -1px 2px #618926;背景:-moz-linear-gradient(#98ba40， #a6c250 35%， #618926);背景:-webkit-gradient(线性，左上，左下，颜色停止(0，#98ba40)，颜色停止(。35， #a6c250)，color-stop(1， #618926));边框:1px实体#618926; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } a.btn:hover { text-shadow: -1px -1px 2px #465f97; background: -moz-linear-gradient(#245192, #1e3b73 75%, #12295d); background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #245192),color-stop(.75, #1e3b73),color-stop(1, #12295d)); border: 1px solid #0f2557; }
完成了!
你知道了!使用相对较少的样式，我们得到了一个看起来与Photoshop版本非常相似的按钮。
如果您还没有像我一样对CSS3感到兴奋，那么希望本文将鼓励您探索和使用CSS的下一个迭代。
更多的CSS3阅读
阅读这些其他文章和教程，了解更多关于CSS3的知识。
下载源文件
- css3-call-to-action-button-demo (ZIP, 0.1 KB)
