用CSS3做个好看的按钮

转载须写明出处,附带本文链接。关于文中的示例,请用Firefox 3.6、Chrome 4.x、Safari 4.x查看。

在线观看演示

在网上看到了一篇文章Liquid & Color Adjustable CSS Buttons,感觉里面的那些按钮很漂亮,作者是用半透明的PNG图片当遮罩,来实现好看的按钮。可惜我对美工那些东西一窍不通,照着里面的教程做PNG图片,搞了很久才弄出来,汗。于是我就想,能不能用CSS3来实现类似的效果呢,那个图片有个渐变,然后加上半透明的效果。现在最新的WebKit和Gecko都支持渐变的背景,而半透明用opacity就搞定了。下面就开始动手,先从制作按钮的遮罩层开始。

既然是遮罩层,那么肯定是浮动在按钮上面的(绝对定位),这里用top、left、right、bottom来调整高度和宽度来遮住按钮,加上上面说的渐变和透明。我们将遮罩分为上下两个部分,上面的用渐变背景,下面的只要用纯色就可以了(其实用一个遮罩也可以实现,但是没有办法让遮罩的边框也渐变,所以用两个)。代码是这样的:

.mask-t, .mask-b {
	position: absolute;    
  -moz-box-sizing: border-box;
  -wekit-box-sizing: border-box;
  box-sizing: border-box;    
}
.mask-t {
	top: 1px;
	left: 1px;
  right: 1px;
  bottom: 50%;
  
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;  
  
	background: -moz-linear-gradient(270deg, 
    rgba(117, 117, 117, .4) 10%, 
    rgba(94, 94, 94, .4) 30%
  );
	background: -webkit-gradient(
		linear, 
		left top, 
		left bottom, 
		from(rgba(117, 117, 117, .4)), to(rgba(94, 94, 94, .4))
	);
    
  border: 1px solid rgba(255, 255, 255, .4);
  border-bottom: none;
}
.mask-b {
	top: 50%;
	left: 1px;
  right: 1px;
  bottom: 0;
  
	-moz-border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px 0 0;  
  
  background: rgba(0, 0, 0, .3);
    
  border: 1px solid rgba(255, 255, 255, .3);
  border-top: none;
}

其实我也不是完全明白CSS3的gradient怎么用,怕讲错,所以这里就不解释了。做这个的时候,我是按照官方文档上的例子改的。

  1. Gecko的:https://developer.mozilla.org/index.php?title=en/CSS/-moz-linear-gradient
  2. WebKit的:http://webkit.org/blog/175/introducing-css-gradients/

OK,遮罩层已经做好了,接下来做按钮。按钮这个层要给遮罩提供定位,而且要设置按钮的大小、颜色,为了美观,我们给它加上圆角和阴影,这也是CSS3的内容。下面是代码:

.button {
	position: relative;
	background: red;
	width: 160px;
	height: 40px;
	line-height: 40px;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	-moz-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
	-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, .5);
	box-shadow:0 1px 3px rgba(0, 0, 0, .5);
}

改变.button的background就可以给按钮换颜色了。注意按钮的border-radius要设置成和遮罩层的一样,我试图给按钮加上overflow: hidden然后去掉遮罩的border-radius,尽管这样,遮罩的四个角还是会显示出来,为什么会这样还请高手指点。接下来,就是按钮的文字部分了,这个层要处在遮罩层的上方以便清楚的显示出文字。和遮罩层一样,设置绝对定位,高宽都设为100%,由于我们的文字层在文档流里处在遮罩层的后面,所以就不用再设z-index了。代码如下:

.text {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	color: #FFF;
	text-decoration: none;
}

到这里,我们的按钮就做好了。这个按钮的优点是不用图片,减少了HTTP连接数,当然也减少了流量。缺点是,这个按钮现在还没什么用,因为IE到目前为止不支持CSS3,虽然有滤镜,但不如用图片来得快。在这里祝愿IE被早日淘汰。

在线观看演示

发表评论