原理：利用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>
效果：
button{width:70px
height:30px
color:#fff
text-align: center
background-color:#c00
color:#fff
line-height: 28px
border-radius:15px
border:0
outline: 0
transition: background 0.2s
}
button:hover{
background:#666
} <button>Go</button>
代码如下：这里先解说下——这里有A /B 两个按钮，分别链接a/b.css， 只要单击按钮就可以实现改变头部id为change_css 的css文件。当你希望change_css一开始没有css只是点击按钮的时候才有css的话，那么你给change_css这个id的链接 href=“ ”
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<link id="change_css" rel="stylesheet" type="text/css" href="a.css">
</head>
<body>
<input type=button value="A按钮" onclick="document.all.change_css.href='a.css'">
<input type=button value="B按钮" onclick="document.all.change_css.href='b.css'">
</body>
</html>
