简洁Bootstrap登录框设计效果

创客云


这是一款简洁的Bootstrap登录框设计效果。该bootstrap登录框采用扁平设计,提供用户名、密码和忘记密码选项,设计简洁、时尚大方。

使用方法

在页面中引入bootstrap文件。

  1. <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

HTML结构

  1. <div class="form-bg">
  2.     <div class="container">
  3.         <div class="row">
  4.             <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">
  5.                 <form class="form-horizontal">
  6.                     <div class="heading">Login Form</div>
  7.                     <div class="form-group">
  8.                         <i class="fa fa-user"></i><input required="" name="login[username]" type="email" class="form-control" placeholder="Username" id="exampleInputEmail1">
  9.                     </div>
  10.                     <div class="form-group">
  11.                         <i class="fa fa-lock"></i><input required="" name="login[password]" type="password" class="form-control" placeholder="Password">
  12.                     </div>
  13.                     <div class="form-group">
  14.                         <button type="submit" class="btn btn-default"><i class="fa fa-arrow-right"></i></button>
  15.                         <span>Don't have an account? <a href="" class="create_account">Sign up</a></span>
  16.                     </div>
  17.                 </form>
  18.             </div>
  19.         </div>
  20.     </div>
  21. </div>

CSS样式

  1. .form-horizontal{
  2.     background-color: #fff;
  3.     font-family: 'Arimo', sans-serif;
  4.     text-align: center;
  5.     padding: 50px 30px 50px;
  6.     box-shadow: 12px 12px 0 0 rgba(0,0,0,0.3);
  7. }
  8.  
  9. .form-horizontal .heading{
  10.     color: #555;
  11.     font-size: 30px;
  12.     font-weight: 600;
  13.     letter-spacing: 1px;
  14.     text-transform: capitalize;
  15.     margin: 0 0 50px 0;
  16. }
  17.  
  18. .form-horizontal .form-group{
  19.     margin: 0 auto 30px;
  20.     position: relative;
  21. }
  22.  
  23. .form-horizontal .form-group:nth-last-child(2){ margin-bottom: 20px; }
  24.  
  25. .form-horizontal .form-group:last-child{ margin: 0; }
  26.  
  27. .form-horizontal .form-group>i{
  28.     color: #999;
  29.     transform: translateY(-50%);
  30.     position: absolute;
  31.     left: 5px;
  32.     top: 50%;
  33. }
  34.  
  35. .form-horizontal .form-control{
  36.     color: #7AB6B6;
  37.     background-color: #fff;
  38.     font-size: 17px;
  39.     letter-spacing: 1px;
  40.     height: 40px;
  41.     padding: 5px 10px 2px 25px;
  42.     box-shadow: 0 0 0 0 transparent;
  43.     border: none;
  44.     border-bottom: 1px solid rgba(0,0,0,0.1);
  45.     border-radius: 0;
  46.     display: inline-block;
  47. }
  48.  
  49. .form-control::placeholder{
  50.     color: rgba(0,0,0,0.2);
  51.     font-size: 16px;
  52. }
  53.  
  54. .form-horizontal .form-control:focus{
  55.     border-bottom: 1px solid #7AB6B6;
  56.     box-shadow: none;
  57. }
  58.  
  59. .form-horizontal .btn{
  60.     color: #7AB6B6;
  61.     background-color: #EDF6F5;
  62.     font-size: 18px;
  63.     font-weight: 700;
  64.     letter-spacing: 1px;
  65.     border-radius: 5px;
  66.     width: 50%;
  67.     height: 45px;
  68.     padding: 7px 30px;
  69.     margin: 0 auto 25px;
  70.     border: none;
  71.     display: block;
  72.     position: relative;
  73.     transition: all 0.3s ease;
  74. }
  75.  
  76. .form-horizontal .btn:focus,
  77. .form-horizontal .btn:hover{
  78.     color: #fff;
  79.     background-color: #7AB6B6;
  80. }
  81.  
  82. .form-horizontal .btn:before,
  83. .form-horizontal .btn:after{
  84.     content: '';
  85.     background-color: #7AB6B6;
  86.     height: 50%;
  87.     width: 2px;
  88.     position: absolute;
  89.     left: 0;
  90.     bottom: 0;
  91.     z-index: 1;
  92.     transition: all 0.3s;
  93. }
  94.  
  95. .form-horizontal .btn:after{
  96.     bottom: auto;
  97.     top: 0;
  98.     left: auto;
  99.     right: 0;
  100. }
  101.  
  102. .form-horizontal .btn:hover:before,
  103. .form-horizontal .btn:hover:after{
  104.     height: 100%;
  105.     width: 50%;
  106.     opacity: 0;
  107. }
  108.  
  109. .form-horizontal .create_account{
  110.     color: #D6BC8B;
  111.     font-size: 16px;
  112.     font-weight: 600;
  113.     display: inline-block;
  114. }
  115.  
  116. .form-horizontal .create_account:hover{
  117.     color: #7AB6B6;
  118.     text-decoration: none;
  119. }
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/47181.html
云模板

发表评论