How to Create Login Form with CSS3 and jQuery

How to Create Login Form with CSS3 and jQuery [Tutorial]

Topic: CSS3 & jQuery
Difficulty: Intermediate / Advanced
Estimated Completion Time: 45 mins

In this tutorial we will code the Login Form that you can find in Futurico UI Pro made by Vladimir Kudinov. To create it we will use CSS3 and jQuery.

Step 1 – HTML Markup

Let’s start creating the HTML markup. Create a form with four inputs (for username, password, checkbox and submit) and wrap the checkbox input and label in a span tag, we will use the span tag to style the checkbox. To finish wrap the form and the title with a div tag and give it the class of “login-form”.

<div>

	<h1>Login Form</h1>

	<form action="#">

		<input type="text" name="username" placeholder="username">

		<input type="password" name="password" placeholder="password">

		<span>
			<input type="checkbox" name="checkbox">
			<label for="checkbox">remember</label>
		</span>

		<input type="submit" value="log in">

	</form>

</div>

Step 1


Step 2 – General CSS Styles

First we will remove all the margins, paddings, borders, etc. from the elements that we will use.

.login-form,
.login-form h1,
.login-form span,
.login-form input,
.login-form label {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

Then we will style the form container. We will add a relative position, a fixed width and height, background color, rounded corners and some shadows.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

.login-form {
	position: relative;
	width: 200px;
	height: 200px;
	padding: 15px 25px 0 25px;
	margin-top: 15px;
	cursor: default;

	background-color: #141517;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
	-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
	box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
}

To create the arrow we will use the :before selector to insert it on the page.

.login-form:before {
	position: absolute;
	top: -12px;
	left: 10px;

	width: 0px;
	height: 0px;
	content: '';

	border-bottom: 10px solid #141517;
	border-right: 10px solid #141517;
	border-top: 10px solid transparent;
	border-left: 10px solid transparent;
}

For the form title we will add some basic styles (color, font family and size, etc.).

.login-form h1 {
	line-height: 40px;
	font-family: 'Myriad Pro', sans-serif;
	font-size: 22px;
	font-weight: normal;
	color: #e4e4e4;
}

Step 2

Step 3 – General Input Styles

First we will give the basic styles to the inputs.

.login-form input[type=text],
.login-form input[type=password],
.login-form input[type=submit] {
	line-height: 14px;
	margin: 10px 0;
	padding: 6px 15px;
	border: 0;
	outline: none;

	font-family: Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-shadow: 0px 1px 1px rgba(255,255,255, .2);

	-webkit-border-radius: 26px;
	-moz-border-radius: 26px;
	border-radius: 26px;

	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}

Then we will style the user and password input. We will add a gray background gradient and some shadows. We will also add fixed 170px width and a color for the text.

.login-form input[type=text],
.login-form input[type=password],
.js .login-form span {
	color: #686868;
	width: 170px;

	-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
	-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);
	box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);

	background: #989898;
	background: -moz-linear-gradient(top,  #ffffff 0%, #989898 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#989898));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#989898 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#989898 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#989898 100%);
	background: linear-gradient(top,  #ffffff 0%,#989898 100%);
}

For the hover state we will only change the shadows of the inputs.

.login-form input[type=text]:hover,
.login-form input[type=password]:hover {
	-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
	-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
	box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);
}

And for the active state we will change the CSS3 gradient to a lighter one.

.login-form input[type=text]:focus,
.login-form input[type=password]:focus {
	background: #e1e1e1;
	background: -moz-linear-gradient(top,  #ffffff 0%, #e1e1e1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1e1e1));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
	background: linear-gradient(top,  #ffffff 0%,#e1e1e1 100%);
}

Step 3

Step 4 – Submit Button

Position the submit button to the right by using the float property.

.login-form input[type=submit] {
	float: right;
	cursor: pointer;

	color: #445b0f;

	-webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
	-moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
	box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);
}

For the hover state we will change the shadows and for the active state we will remove them.

.login-form input[type=submit]:hover {
	-webkit-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
	-moz-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
	box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);
}

.login-form input[type=submit]:active {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

Add we’ll add a green gradient to the button.

.login-form input[type=submit],
.js .login-form span.checked:before {
	background: #a5cd4e;
	background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
	background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
	background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
}

Step 4

Step 5 – Checkbox Styling

Now we will start the most difficult part because we can’t style the checkboxes inputs using CSS like we have styled the other form inputs.

The easiest way that I’ve found to style it using only CSS it’s by replacing the checkbox input with a span tag.

This will work this way: first we will hide the checkbox input and style the span tag like a checkbox and then we will update the checkbox using jQuery. So when we will click on the span tag jQuery will update the checkbox input to selected, and when we will click again the span tag jQuery will remove the “checked” from the checkbox input.

As some users may have the JavaScript disabled we need to add a fallback. To do that we will add with jQuery a “js” class to the body tag. So if the JavaScript will be enabled on the page load it will add a “js” class to the body and if the JavaScript is disabled the class will not be added. So only the users with JavaScript enabled will have the custom styled checkbox.

First we will hide the checkbox input.

.js .login-form input[type=checkbox] {
	position: fixed;
	left: -9999px;
}

Then we will position the span tag.

.login-form span {
	position: relative;
	margin-top: 15px;
	float: left;
}

Now we will add some basic styles to the span.

.js .login-form span {
	width: 16px;
	height: 16px;
	cursor: pointer;

	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

To create the “checked” state to the span we will create a smallest box and will position it in the middle.

.js .login-form span.checked:before {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 8px;
	height: 8px;

	-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
	-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
	box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);
}

To style the label we will position it to the right of the checkbox and add some basic styles (font, color, etc.).

.login-form label {
	position: absolute;
	top: 1px;
	left: 25px;
	font-family: sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: #e4e4e4;
}

All the styles that have the “js” class at the beginning will only be applied if JavaScript is enabled.

Step 5

Step 6 – jQuery

First we will link to jQuery library using the last version hosted by Google, if you want you can host it on your own server, it’s your choice. Next add the following code to the bottom of your HTML file just before the </body> closing tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {

	// Check if JavaScript is enabled
	$('body').addClass('js');

	// Make the checkbox checked on load
	$('.login-form span').addClass('checked').children('input').attr('checked', true);

	// Click function
	$('.login-form span').on('click', function() {

		if ($(this).children('input').attr('checked')) {
			$(this).children('input').attr('checked', false);
			$(this).removeClass('checked');
		}

		else {
			$(this).children('input').attr('checked', true);
			$(this).addClass('checked');
		}

	});

});
</script>

First we’ll add the “js” class to the body tag.

$('body').addClass('js');

Then we will make the checkbox “checked” by default on load.

$('.login-form span').addClass('checked').children('input').attr('checked', true);

With this code we will check if the checkbox is checked and if the result is false the checked class will be removed from the span and if the result is “true” the checked class will be added to the span tag.

$(this).children("input").attr("checked");

Conclusion

Congrats! You’ve finished this tutorial. I hope it was useful for you and you liked it. Don’t forget to leave some feedback in the comments and subscribe us.

Preview

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

Futurico PRO

Valeriu is a Web Designer & Front-End Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on @vtimbuc, Google+ or visit his web site at vtimbuc.net.

Newsletter

12 Comments
  1. Cyrl Mar 13, 5:54 pm

    You could also have added animations for the inputs when clicking on them, from grey to less grey, and revert ;)

    Reply
    0
    • vijay Jan 11, 3:40 pm

      HEllo! plz create as form which can do a sign up and after it can do a log in

      Reply
      0
  2. shreejaya Mar 14, 1:34 pm

    Thanks for sharing with us.Upto now i can’t this kind of information once again i thanks to u

    Reply
    0
  3. Lambo Mar 16, 4:47 am

    Very slick login layout… the only downside… even if you tweet like requested, the download button is never activated… Still awesome layout & tutorials… thanks for Sharing.

    Reply
    +1
  4. Chris Allen Mar 18, 10:21 pm

    This is a genuinely useful guide. Just one thing though. Can we build oAuth into this? Because it is very rare you would want to have a stand-alone login: it can always be easier to authenticate against another social networking site?

    Reply
    0
    • Valeriu Mar 19, 12:53 am

      Yes, this is a styled only login form and don’t have attached any login script, so you can use it with your own login system or use social networks, this will work for both.

      Reply
      0
  5. Alfredo Ramirez Mar 20, 3:16 am

    Very nice feel and touch, very iPhone look-alike, thanks for sharing!!

    Reply
    0
  6. sopier Oct 13, 9:11 am

    I tried this tutorial and the result is not the same as the demo, after changing this line “width: 170px;” to “width: 200px;” now the problem is fixed and the result is the same as the demo… thanks for the tutorial, it’s great!

    Reply
    0
  7. Hector Soto Oct 15, 8:42 pm

    How about internet explorer major versions who don’t support placeholder?

    Reply
    0
  8. Monica Jul 24, 3:41 pm

    Hello

    I not really know i comprehended completely what you meant with that, could you increase a little more on css3 tutorial ?

    Regards

    Reply
    0
  9. Vijay Aug 9, 11:17 pm

    I am looking for a form which asks for user name only after pressing enter it should display the name with a (img) back button (i.e. so that we can correct the username if mistaken) and than show up the password feild after entering password and pressing enter than validate the username and password. Plz do help me.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters