Create Fancy Login / Signup Form In HTML5 & CSS3

0 469

Create Fancy Login / Signup Form In HTML5 & CSS3:-
In this post I am going to share very useful code snippet to create fancy login / signup form for your website, User can easily toggle between login and signup form at any time. because this script creates both the form signin and signup in single frame with toggle behaviour like you have seen many websites.

 

Creating Fancy Login / Signup Form

Libraries

Include all the necessary libraries on page like font library and jQuery.

<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

 

HTML

Creating simple html login and signup form with login and Sign Up toggle tabs.

<div class="form">
 
      <ul class="tab-group">
        <li class="tab active"><a href="#signup">Sign Up</a></li>
        <li class="tab"><a href="#login">Log In</a></li>
      </ul>
 
      <div class="tab-content">
        <div id="signup">   
          <h1>Sign Up for Free</h1>
 
          <form action="/" method="post">
 
          <div class="top-row">
            <div class="field-wrap">
              <label>
                First Name<span class="req">*</span>
              </label>
              <input type="text" required autocomplete="off" />
            </div>
 
            <div class="field-wrap">
              <label>
                Last Name<span class="req">*</span>
              </label>
              <input type="text"required autocomplete="off"/>
            </div>
          </div>
 
          <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>
 
          <div class="field-wrap">
            <label>
              Set A Password<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>
 
          <button type="submit" class="button button-block"/>Get Started</button>
 
          </form>
 
        </div>
 
        <div id="login">   
          <h1>Welcome Back!</h1>
 
          <form action="/" method="post">
 
            <div class="field-wrap">
            <label>
              Email Address<span class="req">*</span>
            </label>
            <input type="email"required autocomplete="off"/>
          </div>
 
          <div class="field-wrap">
            <label>
              Password<span class="req">*</span>
            </label>
            <input type="password"required autocomplete="off"/>
          </div>
 
          <p class="forgot"><a href="#">Forgot Password?</a></p>
 
          <button class="button button-block"/>Log In</button>
 
          </form>
 
        </div>
 
      </div><!-- tab-content -->
 
</div> <!-- /form -->

CSS

Styling your HTML login and signup form with some cool and colour and effect.

<style>
*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
 
html {
  overflow-y: scroll;
}
 
body {
  background: #c1bdba;
  font-family: 'Titillium Web', sans-serif;
}
 
a {
  text-decoration: none;
  color: #1ab188;
  -webkit-transition: .5s ease;
  transition: .5s ease;
}
a:hover {
  color: #179b77;
}
 
.form {
  background: rgba(19, 35, 47, 0.9);
  padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  border-radius: 4px;
  -webkit-box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
          box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
}
 
.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}
.tab-group:after {
  content: "";
  display: table;
  clear: both;
}
.tab-group li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  -webkit-transition: .5s ease;
  transition: .5s ease;
}
.tab-group li a:hover {
  background: #179b77;
  color: #ffffff;
}
.tab-group .active a {
  background: #1ab188;
  color: #ffffff;
}
 
.tab-content > div:last-child {
  display: none;
}
 
h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}
 
label {
  position: absolute;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}
label .req {
  margin: 2px;
  color: #1ab188;
}
 
label.active {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  left: 2px;
  font-size: 14px;
}
label.active .req {
  opacity: 0;
}
 
label.highlight {
  color: #ffffff;
}
 
input, textarea {
  font-size: 22px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  -webkit-transition: border-color .25s ease, -webkit-box-shadow .25s ease;
  transition: border-color .25s ease, -webkit-box-shadow .25s ease;
  transition: border-color .25s ease, box-shadow .25s ease;
  transition: border-color .25s ease, box-shadow .25s ease, -webkit-box-shadow .25s ease;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #1ab188;
}
 
textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}
 
.field-wrap {
  position: relative;
  margin-bottom: 40px;
}
 
.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}
 
.button {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #1ab188;
  color: #ffffff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}
.button:hover, .button:focus {
  background: #179b77;
}
 
.button-block {
  display: block;
  width: 100%;
}
 
.forgot {
  margin-top: -20px;
  text-align: right;
}
</style>

JS

Now finally enable toggle behaviour between login and signup form you may switch any time between login and signup with fade effect.

<script>
$('.form').find('input, textarea').on('keyup blur focus', function (e) {
  var $this = $(this),
      label = $this.prev('label');
 
	  if (e.type === 'keyup') {
			if ($this.val() === '') {
          label.removeClass('active highlight');
        } else {
          label.addClass('active highlight');
        }
    } else if (e.type === 'blur') {
    	if( $this.val() === '' ) {
    		label.removeClass('active highlight'); 
			} else {
		    label.removeClass('highlight');   
			}   
    } else if (e.type === 'focus') {
 
      if( $this.val() === '' ) {
    		label.removeClass('highlight'); 
			} 
      else if( $this.val() !== '' ) {
		    label.addClass('highlight');
			}
    }
 
});
 
$('.tab a').on('click', function (e) {
 
  e.preventDefault();
 
  $(this).parent().addClass('active');
  $(this).parent().siblings().removeClass('active');
 
  target = $(this).attr('href');
 
  $('.tab-content > div').not(target).hide();
 
  $(target).fadeIn(600);
 
});
</script>

See live demos and download source code.

DEMO | DOWNLOAD

Visit official repository for more information and follow for future updates. Don’t forget to read license for using this code snippet in your projects.

 

Leave A Reply

Your email address will not be published.