制作良好扩展性的通用Button

我们经常使用到a,button,input等标签，通过css加背景等方式来实现按钮的效果。但是要做一个通用的样式类，又能保证在各个浏览器下表现一致，还能有很好的扩展性的按纽可不就那么容易了。好了废话少说。进入正题。

首先我们选择a和button两个标签作为通用按纽的外包装器。主要考虑到，在ie6不支持a以外的:hover伪类，使用a就可以对按钮做悬浮状态，这就是为什么选择他们做为最外层的包装器而不是span或者其他的标签。为什么不用input下面会详细说到。

先来认识一下button的类型(type)，button，默认的类型。submit，该可以用来提交表单，功能同<input type=”submit” value=”提交” />。reset，可以用来恢复表单默认值。如下

<form action="">
	<input type="text" value="I LOVE CHINA" />
	<button type="button">type="button"，我是一个默认的button,</button>
	<button type="submit">type="submit"，我可以用来提交表单</button>
	<button type="reset">type="reset"，我可以来清空表单</button>
</form>

type=”button”，我是一个默认的button,
type=”submit”，我可以用来提交表单
type=”reset”，我可以来清空表单

之前说了，当button的type属性为submit的时候，同样可以对表单进行提交，那为什么要选择button,而不是input。原因有两点。

1. 表单中，在css中可以通过标签名字来作为选择器，对输入框和按钮进行样式控制，在不支持css2属性选择器的浏览器中，这点非常重要。
2. 可以在button内甚至可以嵌入div，p这样的标签标签，其扩展性那是相当的好。

但如果想让button在各个浏览器和各种操作系统下表现一致。还是一件比较让人头疼的事情。

在对button清除padding和border之后，ie6，7都会在上内边距产生1个像素的空间，firefox2，3（beta5）则会产生左右内边距3个像素和上内边距1个像素的空白，opera和safari则不会产生多余的内边距填充。请看图。这些差异给我们美化button上填了很多麻烦。

下面通过一个例子来演示一下通用button的制作

style="border: medium none ; overflow: hidden;" src="http://www.iakira.com/labs/-button-demo.html" width="400" height="60">

Html

	<button class="btn btn-style-1" type="submit"><b><b>有兴趣有兴趣</b></b></button>

在这里采用了三层标签的结构，让最内层<b>的背景repeat-x，得到自适应文字宽度。当然也可以两层标签结构的使用滑动门技术实现。但如果要通用的话，那滑动门的背景至少要有800px的宽（考虑到宽屏，文字长等情况）

Images

左边圆角

中间重复背景

右边圆角

在制作的过程中，也许会问，为什么不将三张合成一张背景，其实原因就是上面提到的。每个浏览器下对button标签的默认内间距解释的都不一样。所以只能通过背景垂直居中的方式来解决三张图片对齐的问题。

CSS

	.btn{
		display:inline-block;
		display:-moz-inline-stack;
		*display:inline;
		zoom:1;
		margin:0;
		border:0;
		padding:0 5px 0 0;
		text-align:center;
		font-family:"微软雅黑",YaHei,"黑体";
		vertical-align:middle;
		font-size:0.8em;
		color:#000;
		text-decoration:none;
		background:url("../img/yn_btn_pink_right.gif") right  no-repeat;
	}
	button.btn{
		cursor:pointer;
		width:auto;
		*overflow:visible;
		border:0 none;
		background-color:none;
		vertical-align:middle;
	}
	.btn b{
		display:inline-block;
		display:-moz-inline-stack;
		*display:inline;
		zoom:1;
		padding:0 0 0 5px;
		position:relative;
		white-space:nowrap;
		font-weight:normal;
		height:22px;
		line-height:22px;
		background:#FFD8D3 url("../img/yn_btn_pink_left.gif") left  no-repeat;
		_background-color:#FFF;
	}
	button.btn b b{
		_margin-top:1px;
		padding:0px 8px;
		height:22px;
		line-height:22px;
		cursor:pointer;
		background:#FFD8D3 url("../img/yn_btn_pink_center.gif") left repeat-x;
		_background-color:#FFF;
	}

在css中你会发现其中用到了position:relative;是为了解决ie和firefox下点击后下沉错位的问题。但在opera下还是会没解决掉。还请大家多多帮忙。
在这个例子中还可以在button中嵌入icon的来增加它的视觉效果，篇幅有限就不在这里举例子了。