您的位置：首页 > Web前端 > CSS

html按钮样式

2017-12-19 00:00 295 查看

样式一：



<!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 runat="server">
<title></title>
<style>

#login_click{ margin-top:32px; height:40px;}
#login_click a
{

text-decoration:none;
background:#2f435e;
color:#f2f2f2;

padding: 10px 30px 10px 30px;
font-size:16px;
font-family: 微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;
font-weight:bold;
border-radius:3px;

-webkit-transition:all linear 0.30s;
-moz-transition:all linear 0.30s;
transition:all linear 0.30s;

}
#login_click a:hover { background:#385f9e; }

</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style=" width:386px; height:332px; margin-left:auto; margin-right:auto">
<div id="login_form" >

<div id="form_account">
账户:<input id="txt_account" runat="server" type="text" placeholder="用户名或邮件地址" />
</div>
<div id="form_password" >
密码:<input id="txt_password" runat="server" type="password" placeholder="请输入密码" />
</div>

<div id="login_click">
<a id="btlogin" href="#">登 录</a>
</div>

</div>
</div>

</div>
</form>
</body>

</html>


样式二：



<!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=iso-8859-1" />
<title>Image Rollover with CSS</title>
<style type="text/css" media="screen">
a.button { background:url(rss-feed-img.png) repeat 0px 0px; width: 123px; height: 44px; display: block; }
a.button span { display: none; }
a.button:hover { background: url(rss-feed-img.png) repeat 0px -44px; }
</style>
</head>
<body>
<a href="#" class="button">
<span>RSS Feeds</span>
</a>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  按钮样式
相关文章推荐
新的分享
章节导航