CSS按钮（研究）

javaCrazy！

浏览: 189601 次
性别:
来自: 四川

最近访客更多访客>>

hz2005_2009

liuqimeng1

yimeng500

zihai367

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CMS内容管理系统

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素材