1、话不多说直接贴上效果图，有loadding图片的，代表提交后的状态。
2、代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>纯css按钮，完美兼容浏览器</title>
<style type="text/css">
/*loading class*/
.loading span b{
background-image:url(/image/loading.gif);
background-repeat:no-repeat;
background-position:left;
padding-left:18px;
}
/*yellow btn*/
.yellow_btn {
border: 1px solid #ff9b01;
background: #ffa00a;
}
.yellow_btn span {
min-width: 49px;
_width: 49px;
border-color: #ffb33b;
}
/*blue btn*/
.blue_btn {
border: 1px solid #296797;
background: #4D8EC4;
}
.blue_btn span {
border-color: #74C0FA;
min-width: 49px;
_width: 49px;
}
/*white btn*/
.white_btn {
border: 1px solid #C7C7C7;
background: #F5F5F5;
}
.white_btn span {
border-color: #FAFAFA;
min-width: 49px;
_width: 49px;
color: #000000;
}
/*common btn*/
.btn {
color: #fff;
border-radius: 2px;
display: inline-block;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
text-decoration:none;
}
.btn span {
text-align: center;
white-space: nowrap;
display: inline-block;
border-style: solid;
border-width: 1px;
border-radius: 2px;
height: 26px;
line-height: 25px;
vertical-align: middle;
}
</style>
</head>
<body>
<table style="margin:0 auto;margin-top:200px;">
<tr>
<td>蓝色按钮:</td>
<td style="width:200px;text-align:center;">
<a href="javascript:void(0);" class="btn blue_btn loading">
<span style="width:100px;"><b>登录</b></span>
</a>
</td>
<td>
<a href="javascript:void(0);" class="btn blue_btn">
<span style="width:100px;"><b>登录</b></span>
</a>
</td>
<td>
区别在于class[loading]
</td>
</tr>
<tr>
<td>黄色按钮:</td>
<td style="width:200px;text-align:center;">
<a href="javascript:void(0);" class="btn yellow_btn">
<span><b>登录</b></span>
</a>
</td>
</tr>
<tr>
<td>白色按钮:</td>
<td style="width:200px;text-align:center;">
<a href="javascript:void(0);" class="btn white_btn">
<span><b>登录</b></span>
</a>
</td>
</tr>
</table>
</body>
</html>
?
? ?附件，loadiing.gif素材
