使用CSS3制作漂亮的按钮

2013年11月16日 16:14helloweba.com 作者:月光光 标签:CSS3 

今天我给大家介绍一下如何使用CSS3来制作一个圆角阴影、渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,span,p,a,button,input等等。

今天我给大家介绍一下如何使用CSS3来制作一个圆角阴影、渐变色的漂亮的按钮,它不需要任何图片和javascript脚本,只需要CSS3就可以轻松实现按钮效果,并且可以适用于任意HTML元素,想div,span,p,a,button,input等等。

这些纯CSS代码制作的按钮大小可以根据字体大小自动调整,渐变色背景可以兼容各浏览器,并且有正常、鼠标滑向、点击三种状态样式,当然,如果您的浏览器不支持CSS3,那么按钮将没有圆角和阴影效果。

CSS3特性

首先我们熟悉下CSS3是如何实现圆角和阴影效果的。

CSS3提供了新的属性如:阴影text-shadow,box-shadow,和圆角border-radius,我们先来看这样一段CSS3代码:

text-shadow: 0 1px 1px rgba(0,0,0,.3);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);

以上代码第一行设置了文字的阴影效果,它的用法结构:X轴偏移量,Y轴偏移量,模糊量,颜色,对于颜色可以使用RGBA模式。

第二行代码设置了边框盒子阴影效果,用法与文字阴影效果一样。

第三行和第四行分别表示在不同浏览器内核下的CSS3用法,-webkit-xxx表示webkit内核,-moz-xxx表示firefox内核。

border-radius用来设置圆角样式,同样有webkit和firefox之分。

border-radius: .5em;
-webkit-border-radius: .5em; /* for Webkit */
-moz-border-radius: .5em;  /* for Firefox */

那么如何用CSS3处理渐变色的跨浏览器兼容的问题呢?在css2时代,我们通常会准备一张制作好的渐变背景图片,然后通过background-color来加载背景图片,从而实现背景色渐变效果。而CSS3,只需要区分不同浏览器内核下使用颜色来完成渐变效果。

background: #0095cd;
/* for Webkit */
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
/* for Firefox */
background: -moz-linear-gradient(top,  #00adee,  #0078a5);
/* for IE */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', 
endColorstr='#0078a5');

对于webkit内核浏览器,-webkit-gradient(),linear表示渐变类型为线性渐变,left top表示渐变开始位置X轴和Y轴,left bottom表示渐变结束位置X轴和Y轴,from(#00adee), to(#0078a5)表示渐变色从#00adee到#0078a5。

对于firefox内核浏览器,-moz-linear-gradient(top, #00adee, #0078a5)中linear表示渐变类型为线性渐变,top表示渐变开始位置,后面表示两个颜色值的变化。

而对于IE内核,使用filter(滤镜),其中startColorstr和endColorstr分别表示开始颜色和结束颜色的变化值。

介绍完上面的CSS3特性,我们现在来使用CSS3制作漂亮的按钮效果。

如何使用

1、首先你可以复制DEMO中的CSS代码。查看DEMO

2、在html页面中加入如下代码:

<a href="#" class="button green">正品化妆品香港代购</a> 

3、您将会得到以下按钮效果:

正品化妆品香港代购


声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/239.html

1条评论

  • 推荐使用http://buttoncssgenerator.com ,可以生成各种效果的按钮css,包括圆角、渐进颜色、阴影,并兼容各大主流浏览器