Silentash-默尘

前端开发经常会从视觉设计师那里拿到比较BT的按钮设计效果，比较极端的就如渐变圆角自适应按钮！拿到手之后你可能会恨啊，狠归恨，工作还是得做，也许你会采用 A 标签嵌套 SPAN 标签的方法模拟一个按钮，但更极端的情况下，比如 FORM 中的按钮，不管从使用及语义讲，用非按钮标签实现都不是很妥当的。

下面就介绍一个比较实用的按钮结构的写法，是从白社会那里 KIA 来到哦，我个人觉得做的很 NICE，SO!好东西就拿出来和大家分享：

 <span class="btn"><span><button type="submit">确定</button></span></span>


很简单的代码吧^_^!
搭配样式：

	.btn,.btn span{
		display:-moz-inline-stack;
		display:inline-block;
		*display:inline;
		*zoom:1;
		background:transparent url(images/button.gif) no-repeat scroll right 0;
		padding:0 10px 0 0;
	}
	.btn:hover{
		background-position: right -50px ;
	}
	.btn:hover span{
		background-position: 0 -50px ;
	}
	.btn span{
		padding:0 0 0 10px;
		background-position: 0 0 ;
	}
	.btn a,.btn a:visited,.btn button{
		font:12px/24px airal;
		font-weight:700;
		background:transparent;
		text-decoration:none;
		display:-moz-inline-stack;
		display:inline-block;
		_display:inline;
		border:0;
		color:#fff;
		height:24px;
		margin:0 -10px;
		padding:0 10px;
		overflow:visible;
		outline:none;
		vertical-align:middle;
	}

优点是：

1. 使用更具语义化的button标签作为载体
2. 不在button标签内部做文章，结构更清晰，样式更易控
3. 把button的背景设为透明来继承父元素的背景色，代替直接在button上设置背景图的做法，可以更方便的模拟按钮被点击的效果
4. 实现按钮长度自适应
5. button和a标签可互换，适应范围更广

缺点也是显而易见：IE6下不支持span的伪类属性

来个例子实在点：查看示例

还不错吧？如果你有更 NICE 的写法可以告诉我哦！