好看的按钮样式

来源:互联网 发布:图拉丁 知乎 编辑:程序博客网 时间:2024/03/29 23:06
 

<style type="text/css">
 #home_bg {
    height:40px;width: 100%;
  
   -webkit-box-shadow: #666 px px 3px;
  -moz-box-shadow: #666 px px 3px;
  box-shadow: #666 px px 3px;
  background: #58AEE1;
  background:-webkit-gradient(linear, 0 0, 0 bottom, from(#BDE0F5), to(#58AEE1));
    background:-moz-linear-gradient(#BDE0F5, #58AEE1);
    -pie-background:linear-gradient(#BDE0F5, #58AEE1);

    behavior: url(PIE.htc);
}
.div_center{
 height:505px; 
}

a.btn_login {
    background: url("${base}/res/cms/images/pic_button01.gif") no-repeat scroll left top transparent;
    cursor: pointer;
    display: inline-block;
    height: 42px;
    line-height: 42px;
    margin-right: 10px;
    padding-left: 20px;
    text-decoration: none;
    width: auto;cursor: pointer
}
a.btn_login span {
    background: url("${base}/res/cms/images/pic_button01.gif") no-repeat scroll right top transparent;
    color: #FFFFFF;
    display: inline-block;
    font-family: 黑体;
    font-size: 20px;
    font-weight: normal;
    height: 42px;
    line-height: 42px;
    padding-right: 20px;cursor: pointer
}

.inputbox{width:180px; height:18px; line-height:18px; color:#333; border:1px solid #cacaca; background:#fff; padding:5px; margin-right:5px; display:inline; vertical-align:middle;}
#foot_bg {
    height:30px;width: 100%;line-height:30px;
    background: #58AEE1;
  background:-webkit-gradient(linear, 0 0, 0 bottom, from(#BDE0F5), to(#58AEE1));
    background:-moz-linear-gradient(#BDE0F5, #58AEE1);
    -pie-background:linear-gradient(#BDE0F5, #58AEE1);
  
    behavior: url(PIE.htc);
}
.foot_div{
 margin:0 auto;
 text-align:center;
 font-size:12px;
}
</style>

</head>
<body>
 <div id="home_bg"></div>
 <div class="div_center">
  <form id="jvForm" action="login.do" method="post">
   <#if returnUrl??><input type="hidden" name="returnUrl" value="${returnUrl}"/></#if>
   <#if processUrl??><input type="hidden" name="processUrl" value="${processUrl}"/></#if>
   <table border="0" style="width:600px;text-align:center;margin:0 auto;margin-top:120px;" cellpadding="0" cellspacing="0">
    <tr>
     <td width="40%" vertical-align="top"><img src="${base}/res/cms/images/logo.png" /></td>
     <td><#if errors??>
       <#list errors as error>
        <font color="red">${error}</font></br>
       </#list>
      </#if>
      <table width="280" border="0" cellpadding="0" cellspacing="0">
       <tr>
        <td width="91" height="50"><strong>帐 号</strong></td>
        <td ><input type="input" id="username" name="username" vld="{required:true}" title="请输入帐号" maxlength="100" class="inputbox"/></td>
              </tr>
              <tr>
               <td height="50"><strong>密 码</strong></td>
               <td><input name="password" type="password" id="password" vld="{required:true}" title="请输入密码" style="width:180px; height:18px; line-height:18px; color:#333; border:1px solid #cacaca; background:#fff; padding:5px; margin-right:5px; display:inline; vertical-align:middle;"/></td>
              </tr>
              <tr>
               <td height="70" colspan="2" align="center">
                <a href="javascript:document.forms[0].submit();" class="btn_login"><span>登 录</span></a>
                       &nbsp; &nbsp;
                   <a href="javascript:document.forms[0].reset()" class="btn_login"><span>重 置</span></a>
                </td>
              </tr>
            </table>
     </td>
    </tr>
   </table>  
  </form>
 </div>
 

原创粉丝点击