什么都分享
以及,记录自己的故事
正在载入当前位置天气信息……

纯CSS设计简约登陆菜单

示例

GIF

Html

<table class="table">
  <tr>
    <td>工号:</td>
    <td><input class="ex_text" name="username" type="text" value=""></td>
  </tr>
  <tr>
    <td>密码:</td>
    <td><input class="ex_text" name="password" type="password"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input class="ex_btn" name="登录" type="submit" value=" 登 录 ">
        <input class="ex_btn" type="reset" name="Submit" value=" 重 置 " >
    </td>
  </tr>
</table>

CSS

.table{
 height: 139px;
 width: 400px;
 border: 0px;
 align-content: center;
}

.ex_text{
 height: 20px;
 border: 1px solid #CCCCCC;
 border-radius: 8px;
 transition: 0.3s;
}
.ex_text:hover{
 border: 1px solid orange;
 transition: 0.3s;
}

.ex_btn{
 border: 1px solid white;
 border-radius: 8px;
 background-color: EEEEEE;
 padding: 5px 5px;
 margin: 0 8px;
 transition: 0.3s;
}
.ex_btn:hover{
 border: 1px solid orange;
 background-color: orange;
 transition: 0.3s;
}
打赏
本文遵守创作共享 BY-NC-ND 4.0协议,转载前请先联系作者。绯末博客 » 纯CSS设计简约登陆菜单
分享到: 更多 (0)

评论 抢沙发

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏