Heim >Web-Frontend >HTML-Tutorial >基于CSS3 登录表单 个性化登录按钮_html/css_WEB-ITnose

基于CSS3 登录表单 个性化登录按钮_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:26:431243Durchsuche

这是一款基于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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn