原理：利用a标签和i标签各自一个背景组合成为按钮，达到自适应。
复制代码
代码如下:
<!DOCTYPE
html>
<html>
<head>
<meta
charset="UTF-8">
<style
type="text/css">
.btn
a{text-decoration:none}
.btn{display:
inline-block
background:
url(s_btn.png)
no-repeat
0
0
height:
22px
line-height:
22px
color:
#666
vertical-align:top}
.btn
i{display:blockfont-style:
normal
font-size:
12px
padding:
0
10px
background:url(s_btn.png)
no-repeat
right
-22px
}
.btn:hover{text-decoration:
nonecolor:#4c8136background-position:
0
-44px}
.btn:hover
i{background-position:
right
-66px}
.btn:active{background-position:
0
-88px}
.btn:active
i{background-position:
right
-110px}
.btn_disabled,
.btn_disabled:hover{background:
url(../img/s_btn.png)
no-repeat
0
-132pxcursor:
default}
.btn_disabled
i,
.btn_disabled:hover
i,
.s_btn_disabled:active
i{background-position:
right
-154pxcolor:#999}
</style>
</head>
<body>
<a
href="#"
class="btn">
<i>这是按钮</i>
</a>
<a
href="#"
class="btn">
<i>按钮</i>
</a>
</body>
</html>
效果：
用背景就可以呀比如
a {
display:block //定义为块元素，才可以使用宽、高、背景
width:120px
height:40px
line-height:40px
color:#FFF
background:url(icon.gif) no-repeat 10px 15px #F00 //定义背景，图片不重复，距左10像素距顶15像素，背景图片覆盖不到的地方显示背景色#F00
text-indent:40px //文字缩进40像素，以不和icon重叠
}
以上具体的数字，根据效果来调整
