按钮样式举例

beyes · 发表于 2015-12-25 17:00:00

下面举例对按钮进行样式描述。

考虑下面的代码：

<!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>选择器</title>
<style type="text/css">
.ip { height:30px; width:200px; background-color:#033; border:none; color:#CCC;}
.ip_over { height:30px; width:200px; background-color:#990; border:none; color:#CCC; cursor:pointer;}
}
</style>
</head>
<body>
<input type="submit" value="注册" /> <br/> <br/>
<input type="submit" value="注册" class="ip" />
</body>
</html>

复制代码

第 1 条 input 语句，定义了一个最为普通的按钮。

第 2 条 input 语句则是使用了样式描述。它有两个事件，当鼠标不在按钮上时(onMounseOut)时应用类名为 ip 的样式；当鼠标悬停在按钮上时（onMouseOver）应用类名为 ip_over 的样式。

效果如下图所示：

		自动登录	找回密码
密码			立即注册

[CSS] 按钮样式举例