仿163邮箱鼠标放上变色的按钮样式

来源:互联网 发布:mysql 主主缺点 编辑:程序博客网 时间:2024/04/30 02:00

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿163邮箱鼠标放上变色的按钮样式</title>
<style>
.btn02 { width:60px; height:24px; border:1px solid #87a3c1; background:url(/uploadfile/200911/11/1632433537.gif); color:#555; font-size:12px; line-height:180%; cursor:pointer;}
.btn04 { width:60px; height:24px; border:1px solid #a2904d; background:url(/uploadfile/200911/11/1632433537.gif) 0 -66px; color:#630; font-size:12px; cursor:pointer; line-height:180%;}
</style>
</head>

<body>
<p>
  <input name="button2" type="reset" class="btn02" onmouseover="this.className='btn04'" onmouseout="this.className='btn02'"  id="button2" value="重置" />
</p>
<p>鼠标放到按钮上试试</p>
</body>
</html>