日期:2014-05-16  浏览次数:20616 次

纯css按钮,完美兼容浏览器

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>
				&nbsp;区别在于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素材