Nov

Stylish Animated Login and Signup Form with JQuery and CSS3

ZeeShaN

Check out an amazing animated and stylish login / register jquery form which is simple to use. I put some animation which adds some attractive looks. If any one needs this form then only backend code is needed to make it working. I really like this stylish form and I hope you will also like this tutorial.

JQuery Code

$(document).ready(function() {
 
	$('#nav-bar').fadeIn();
 
	$('#Log-in').click(function() {
 
		$('#Log-in').css('background-color', '#006699');
		$('#signUp').css('background-color', '#000000');
		$('#submit').hide().css({'left' : '0px'});
		$('#SignupForm').hide().css({'top' : '0px'});
 
		$('#login').show().animate({
 
			left   : '52%',
 
		},400,function(){
 
			$('#login').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });
 
		});
		///
		$('#Login_form').show().animate({
 
			top   : '60px',
 
		},700,function(){
 
			//$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });
		});
	});
 
	$('#signUp').click(function() {
 
		$('#signUp').css('background-color', '#006699');
		$('#Log-in').css('background-color', '#000000');
		$('#login').hide().css({'left' : '0px'});
		$('#Login_form').hide().css({'top' : '0px'});
 
		$('#submit').show().animate({
 
			left   : '52%',
 
		},400,function(){
 
			$('#submit').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });
 
		});
		///
		$('#SignupForm').show().animate({
 
			top   : '60px',
 
		},700,function(){
 
			//$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });
		});
	});
 
});

HTML

<img id="login" src="result.png" alt="" />
	<img id="submit" src="submit.png" alt="" />
 
<div id="Login_form" class="loginform">
<form action="#" method="post">
 
<div>
 
<div class="form-item">
 
			 <label for="edit-name">Username:</label>
			 <input id="edit-name" class="form-text required" maxlength="60" name="name" size="15" type="text" /></div>
 
 
<div class="form-item">
 
			 <label for="edit-pass">Password:</label>
			 <input id="edit-pass" class="form-text required" maxlength="60" name="pass" size="15" type="password" /></div>
</div>
 
</form></div>
 
 
<div id="SignupForm" class="loginform">
<form action="#" method="post">
 
<div>
 
<div class="form-item">
 
			 <label for="edit-name">Email:</label>
			 <input id="edit-name" class="form-text required" maxlength="60" name="name" size="15" type="text" /></div>
 
 
<div class="form-item">
 
			 <label for="edit-name">Username:</label>
			 <input id="edit-name" class="form-text required" maxlength="60" name="name" size="15" type="text" /></div>
 
 
<div class="form-item">
 
			 <label for="edit-pass">Password:</label>
			 <input id="edit-pass" class="form-text required" maxlength="60" name="pass" size="15" type="password" /></div>
</div>
 
</form></div>
 
 
<div id="nav-bar">
 
<div class="module-bg">
			<a id="Log-in" class="TopButtons" href="#">Login</a>
			<a id="signUp" class="TopButtons" href="#">SignUp</a></div>
</div>

CSS

body{
	font-family: Arial, Helvetica, "Trebuchet MS";
}
 
input{
  font: 12px/100% Verdana, sans-serif;
  color: #494949;
}
 
a.TopButtons, a.TopButtons:visited {
 
	-moz-border-radius:3px 3px 3px 3px;
	background:none repeat scroll 0 0 #000000;
	color:#FFFFFF;
	float:left;
	font-family:helvetica,arial,sans-serif;
	font-size:13px;
	font-weight:700;
	margin:0 1px 30px;
	padding:12px 15px;
	text-align:center;
	text-decoration:none;
	text-shadow:none;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-webkit-transition:all 0.1s ease-in-out;
	width:120px;
}
a.TopButtons:hover {
 
	text-shadow:none;
	text-align:center;
	font-family:helvetica, arial, sans-serif;
	color:#fff;
	font-size:13px;
	background:#006699;
	text-decoration:none;
	font-weight:700;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-webkit-transition:all 0.1s ease-in-out;
}
 
.module-bg {
	left:0;
	margin:0;
	opacity:0.85;
	padding:0;
	position:absolute;
	top:5px;
	height:43px;
	width:304px;
	z-index:1;
}
 
#nav-bar {
	font-size:14px;
	font-weight:500;
	display:none;
	height:40px;
	left:30%;
	position:fixed;
	line-height:18px;
}
#login{
	/* for firefox, safari, chrome, etc. */
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	left:0px;
	cursor:pointer;
	top:60px;
	display:none;
	position:absolute;
	/* for ie */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
 
#submit{
	/* for firefox, safari, chrome, etc. */
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	left:0px;
	cursor:pointer;
	top:80px;
	display:none;
	position:absolute;
	/* for ie */
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
 
div{
	font-size: 14px;
	font-family: Arial, Helvetica, "Trebuchet MS";
}
 
input.form-text{
	border: 4px solid #c0d679;
	padding:4px 10px;
	font-size: 15px;
	font-family: Arial, Helvetica, "Trebuchet MS";
}
 
input.form-text:focus{
	background:#ddedbb;
	border-color: #70a405;
}
 
html.js input.form-autocomplete{
	width:95%;
}
 
a.login{
	display: block;
	float: right;
	font-family:"Trebuchet MS",Arial;
	font-size:13px;
	text-decoration:none;
	padding: 6px 12px 6px 12px;
	font-weight: bold;
	color: #266b5d;
	font-variant: small-caps;
}
 
a.login:hover, a.logout:hover{
	color: #1d2920;
}
 
#Login_form{background: transparent url(login_pop.png) no-repeat top center;}
#SignupForm{background: transparent url(signup_pop.png) no-repeat top center;}

div.loginform{
	top:0px;
	left:30%;
	height:350px;
	position:fixed;
	display:none;
	width:305px;
}
 
.loginform form{
	padding:23px;
	position:relative;
	*padding-top:33px;
	*padding-bottom:28px;
	*overflow: inherit;
	_padding-top:30px;
	_height:1%;
}
 
.loginform .item-list{
	padding-top: 7px;
	overflow: hidden;
	_padding-top:15px;
}
 
.loginform .form-item{
	overflow: hidden;
	margin: 13px 0px;
	clear: both;
	_padding:4px 0px;
	_margin:0px;
}
 
.loginform .form-item label{
	float: left;
	color: #5c7a72;
	font-size: 13px;
	padding-top: 6px;
}
 
.loginform .form-item input.form-text{
	border-width: 1px;
	background: #eff7f9;
	float: right;
	width:156px;
}
 
.loginform .form-item input.form-text:hover, .loginform .form-item input.form-text:focus{
	background: #FFF;
}
 
.loginform .form-submit{
	background:transparent url(images/login_btn.gif) no-repeat center;
	padding: 3px 4px;
	float: right;
	font-variant: small-caps;
	font-family: Arial, "Trebuchet MS", Helvetica;
	color: #e5eae9;
	border: none;
	width:72px;
	height: 27px;
}
 
.loginform .form-submit:hover{
	color: #FFF;
	background:url(images/login_btn_o.gif);
}

Downloads files to get this latest tutorial.

Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

Most recent

Most liked

Show all comments (11)

ramandeep

Very very awesome…tnxx

April 22 2012

Comments Like

1 people liked this

aykak

Great and awesome tutorial

January 02 2012

Comments Like

0 people liked this

harshal

hii ..i liked ur login script ….but having some problem . when Login is clicked it doesn’t get Redirect to next page nor does it check the fields in database i m new to j-query . can u help ? how to check the user name and password in db(mysql).And redirect it accordingly …thanking you…

April 15 2011

Comments Like

0 people liked this

irwin

great work!!! really, but i have many problem with I.E. … and so seem i can’t use thiis solution for my site.
do u have a solution for I.E. thank you

April 14 2011

Comments Like

0 people liked this

do hi no

hello! your login form made by css3 and jQuery is so great.
I like simply but modern design.
but I can’t see in IE 6 and IE 7
Is there a way to solve it?
thank you!

March 13 2011

Comments Like

0 people liked this