CSS3 ログイン フォームに基づくパーソナライズされたログイン button_html/css_WEB-ITnose

これは、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