基于CSS3 登录表单 个性化登录按钮

Posted 2020-06-14

这是一款基于jQuery和CSS3的登录表单，登录表单的界面整体呈现扁平化风格，非常简洁和清新。当焦点在表单的输入字段上时，表单提示文字会出现一个小动画，同时这款CSS3登录表单的最大特点是其个性化的登录按钮，鼠标滑过也有不错的效果。

在线预览    源码下载

实现的代码。

html代码：

<div class="panel-lite">
  <div class="thumbur">
    <div class="icon-lock"></div>
  </div>
  <h4>用户登录</h4>
  <div class="form-group">
    <input required="required" class="form-control"/>
    <label class="form-label">用户名    </label>
  </div>
  <div class="form-group">
    <input type="password" required="required" class="form-control"/>
    <label class="form-label">密　码</label>
  </div><a href="#">忘记密码 ?  </a>
  <button class="floating-btn"><i class="icon-arrow"></i></button>
</div>

via：http://www.w2bc.com/article/css3-login-form-pretty-button