Best Login page design using Css and jQuery

This post is very basic level CSS implementation. I want to explain how to design Login Page Design with CSS, HTML and Jquery.This will include social login button as well.
Let’s create an HTML first:-

<div class="login">
 <div class="login-section">
  <h1>Please Login</h1>
  <form action="#" method="post">
   <input type="text" required value="" placeholder="Username" id="username" />
   <input type="password" required value="" placeholder="Password" id="password" />
   <button type="submit">Login</button>
  </form>
  <span class="split">OR</span>
  <div class="social-container">
   <a class="social-btn fb " href="javascript:;"><span class="social-icon"></span><span class="social-text">Share on Facebook</span>
   </a>
   <a href="javascript:;" class="social-btn tw"><span class="social-icon"></span><span class="social-text">Share on Twitter</span>
   </a>
</div>
<div>
   <a class="forgot" href="javascript:;">Forgot Password</a>
</div>
 </div>

<div class="forgot-section">
<h1>Please enter your email</h1>
<form action="#" method="post">
  <input type="text" required value="" placeholder="Username" id="username" /> 
  <button type="submit">Submit</button>
</form>
 <div>
    <a class="loginback" href="javascript:;">Back to login </a>
  </div>
 </div> 
 </div>

Basically we have div with login class name, This will work as container and
inside this div we have to section login-section and forgot-section.
So the idea is one section will be visible at a time and second will be hidden.

Let’s add css:-

 html, body { background: #eeeeee none repeat scroll 0 0; margin: 0; padding: 0; } .login { background: rgb(255, 255, 255) none repeat scroll 0 0; border: 1px solid rgb(216, 216, 216); border-radius: 4px; margin: 70px auto; padding: 20px; width: 330px; } .login h1 { color: rgb(0, 0, 0); font-family: sans-serif; font-size: 17px; margin-bottom: 20px; margin-top: 0; text-align: center; text-transform: uppercase; } .login input { width: 100%; height: 42px; box-sizing: border-box; border-radius: 5px; border: 1px solid #ccc; margin-bottom: 20px; font-size: 14px; font-family: sans-serif; padding: 0 20px 0 50px; outline: none; } .login input:focus{ border-color:#0079CE; } .login button { width: 100%; padding:9px 7px; background: #0079CE; box-sizing: border-box; border-radius: 5px; border: 1px solid #0079CE; color: #fff; font-weight: bold; text-transform: uppercase; font-size: 14px; outline: none; font-family:sans-serif; cursor: pointer; } .login button:hover { background: #008DDE; } .login p { text-align: center; } .split { border: 2px solid #1869be; border-radius: 50%; clear: both; color: #1869be; display: inline-block; height: 40px; line-height: 40px; width: 40px; } #username { background: rgba(0, 0, 0, 0) url("images/uname.png") no-repeat scroll 11px center; } #password { background: rgba(0, 0, 0, 0) url("images/pass.png") no-repeat scroll 11px center; } .social-btn { display: inline-block; position: relative; margin: 0 .25em .5em 0; padding: 0; color: #fff; font-family: sans-serif; font-size: 14px; font-weight: 400; line-height: 1em; text-decoration: none; border: 0; border-radius: 0.4em; text-transform: uppercase; overflow: hidden; width:100%; } .social-btn:hover { color: #fff; } .social-icon, .social-text { display: block; float: left; } .social-icon { border-right: 0.1em solid rgba(255, 255, 255, 0.1); box-shadow: -0.1em 0 0 rgba(0, 0, 0, 0.1) inset; height: 24px; margin: 0 -0.4em 0 0; padding: 0.6em 0.8em 0.5em; width: 20px; } .social-text { font-size: 14px; font-weight: bold; padding: 13px 16px; text-align: center; } .fb { background-color: #205081; } .fb:hover ,.fb:active{ background-color: #2f5f90; } .tw ,.tw:active { background-color: #108ac1; } .tw:hover { background-color: #21aded; } .forgot,.loginback { color:#0079ce; text-decoration:none; } .fb .social-icon { background: rgba(0, 0, 0, 0) url("images/fb.png") no-repeat scroll center center; } .tw .social-icon { background: rgba(0, 0, 0, 0) url("images/tw.png") no-repeat scroll center center; } .forgot-section { display:none; } @media only screen and (max-width: 400px) { .login { width:85%; } } 

Now add some jQuery code to hide and show section on button click:

   $(function(){
     $('.forgot').click(function(){
      $('.login-section').fadeOut('slow',function(){
        $('.forgot-section').fadeIn('slow');
      });
     });
      $('.loginback').click(function(){
      $('.forgot-section').fadeOut('slow',function(){
        $('.login-section').fadeIn('slow');
      });
     });
   });

<pre>

You can check working demo Here
Download Source Code

Add a Comment

Your email address will not be published. Required fields are marked *