An easy way to create login panel with jQuery and CSS

Among many studies conducted to find out just what influences people’s perception of a website’s credibility, one interesting finding is that users really do judge a book by its cover… or rather, a website by its design.

Rapid changes in design trends are driving focus towards its usability. More and more features are being zipped into a plain and simple design for users to get bountiful results without spending more than a jiffy. The back-end coding is the key device to achieve this simplicity in design.

Keeping this mind, I’ve designed a small script to introduce a sliding login box into your website, just as you see in Twitter login page. The script comprises jQuery & CSS techniques to display this arty feature. Checkout the code below and try it yourself or simply download the ready to use files.

View Demo | Download Code

xHTML Code





Clients Area




Username:
  
Password:
 

Press ESC to close

CSS Code

jQuery Code

What more features can I zip for you? Do let me know in the comments.

50 Comments Add Comment

Oct 09, 2011 / Mark:

Simple and works perfectly, awesome job and thanks!
Reply
Sep 05, 2011 / vem:

..thank yo for this code it will help me to finish my project..keep on posting like this code
God bless
Reply
Sep 01, 2011 / Chris:

Lovely tutorial – have implemented it on my site.

Thanks.
Reply
Jul 17, 2011 / Shubhamoy:

Hi Mohit,

Thanks a ton for this article! It helped me a lot in my recent project.

BR,
Shubhamoy
Reply
Jul 05, 2011 / Guy:

And iPad has no Mouseout click, so the panel does not disappear with a touch outside the box. Maybe add a link inside the script (or cross) with a CLOSE-link?

press ESC or close

$(“#login-close”).click(function() {
$(“#login-panel”).hide(0);
return false;
});
Reply
May 13, 2011 / Rakesh Mishra:

Thanks.
Reply
Feb 16, 2011 / pramod:

thankyou,
but I need to validate the username and password in php and then rediect to index page if its the right user and if not the dialog box should remain still showing invalid username or password
Reply
Feb 07, 2011 / sayid:

Thanks for sharing this simple and nice code with us, just one note on this css code:
# #login-panel{
# position: absolute;
# top: 26px;
# rightright: 0px;
….}

I think there is a mistake on the last line on login-panel identifier and need to be modified to \right:0px\

thanks again
Reply
Jan 29, 2011 / cye:

i’m going to use this.. thanks!!!
Reply
Jan 25, 2011 / Nitesh Chauhan:

hello, this post was really amazing.. thanx i am not into UI development but i am intrested in learning it. this was helpful.
Reply
Nov 07, 2010 / saboo:

very nice
Reply
Nov 07, 2010 / Anders:

Really good tutorial, was not hard to implement it either.

But i wonder, is it hard to modify it so the box goes away if you click anywhere else on the page?
Reply
1. Nov 08, 2010 / CSSJockey:
  
  Nope its not hard, you can use jQuery mouseout event to accomplish this task.
  Reply
Oct 19, 2010 / Surge:

Great post, it is nice to have people sharing good code to help the community.
Reply
1. Oct 21, 2010 / CSSJockey:
  
  Thanks!! Stay tuned for more.. I don’t post much due to my busy schedule, however whenever I have time, I publish something worth sharing
  Reply
Sep 29, 2010 / Yogesh Singh:

very use full dude !!!! thanks
Reply
Sep 27, 2010 / yogesh kanthale:

its really helpful thanks for that
Reply
Aug 10, 2010 / Shashwat:

Thanks you for sharing this code its working great …
Reply
Aug 03, 2010 / Philip:

Thanks you very much for sharing your knowledge with us,
i try to add 3 links with different content in each drop box but i can;t find how to do this,

i need to duplicate the function? or i can add some (“#login-link,#link2,#link3″)

thanks a lot again

all the best!
Reply
1. Aug 05, 2010 / CSSJockey:
  
  If you need different content then you would need to duplicate the function or else you can use multiple selectors to have the same functionality.
  Reply
Jul 24, 2010 / Ardy:

hello
This is cool man
would you like to tell me how to erase black top border, i just only need box of client area, i am new one in web design

Thanks a lot
Reply
1. Jul 25, 2010 / CSSJockey:
  
  You can edit the CSS and remove the styles.
  Reply
Jul 06, 2010 / Naples web design:

I have tried the code and it works well with my blog. Thanks for giving up the code. The code are well managed and if there’s a bug it’s easy to locate and fix.This is one of those login panel I love to put in my sites because I have found other to be like this which is quite similar.
Reply
1. Jul 08, 2010 / CSSJockey:
  
  I m glad you like it.. stay tuned for more…
  Reply
Jun 27, 2010 / csska:

good post to create best admin panel)
Reply
Jun 18, 2010 / Achumbra:

cool, simple panel, how can i add “Remember me” checkbox to it?

thank you.
Reply
1. Jun 22, 2010 / CSSJockey:
  
  You can add any form tags in the HTML code and add functionality as per your requirements.
  Reply
May 26, 2010 / Hans:

Must say! This is a nice and clean code example, you are rocking man!!!
Many thanks to you bro!!

Keep up the god work!!

Hans
Reply
1. May 26, 2010 / CSSJockey:
  
  Thanks, I am glad you like it.. Stay tuned for more..
  Reply
May 22, 2010 / Aminul Islam Sajib:

Hi there! I’m an old WordPress user and love blogging and modifying themes to add personal touch to my blog. But I’m completely new to CSS designing and haven’t yet stepped into learning PHP and Javascript or jQueries (what are the differences?). So, I’m a little confused which code to place where. I mean, let’s say the CSS code will be placed in the stylesheet page, right? And what about xHTML and jQuery? Where do I place them?

Hopefully you will help me understand it. Thanks in advance.
Reply
1. May 24, 2010 / CSSJockey:
  
  I’m sure this website will help you learn the basics: http://www.w3schools.com/ check it out!!
  Reply
May 20, 2010 / Web Design Preston:

Smooooooooth!

I wonder if it is just that no one knows about these elegant little jQuery functions or they are too lazy to implement them…? Whatever the answer I’m not going to fall into the trap, this code is going on to all future projects of mine! Thanks again Mohit!
Reply
May 13, 2010 / Francisco Schiltz:

I have been to your site half a dozen times now, and this time I am adding it to my bookmarks Your discussions are always relevant, unlike the same-old stuff on other sites (which are coming off my bookmarks!) Rock on!
Reply
1. May 16, 2010 / CSSJockey:
  
  Thanks, I am glad you like what I share..
  Reply
Apr 27, 2010 / alice@postalgold:

Thanks alot for the post…and the design is simple and clean too! Where do I insert the code, in wordpress blogs…will it be in the header ?
Reply
Apr 24, 2010 / Master:

Tanks a lot for this post.
I like simple login panel.I have 1 site to share with your .
Professiona and top page rank guide for beginners
http://www.tutorials99.com
Reply
Apr 21, 2010 / Rahim Afghan:

Thank you, it looks great. Can I use it for commercial sites?
Reply
1. May 19, 2010 / CSSJockey:
  
  Sure, you are free to use this code on any project you do
  Reply
Mar 09, 2010 / Cihat:

thank you for post it is very nice thanks again
Reply
Feb 24, 2010 / vector graphics:

very nice panel thanks
Reply
Feb 19, 2010 / Web Design Manchester:

Fully loving that, quite slick with the animation, pressing the escape key-could that not be functionised and made into a close button on the top right of the dialog box which drops down.

How does this application handle error messages with login?
Reply
1. Feb 19, 2010 / CSSJockey:
  
  You can use Ajax with jQuery or other frameworks to handle errors and other actions.
  Reply
Feb 12, 2010 / Nena Gutscheinbuch:

Tanks a lot for this post.
I like simple login panel.
Reply
Feb 12, 2010 / Sean:

Sweeet. I’ve come across similar tutorials but I really like the way this one works. Code looks clean. Thanks.
Reply
Feb 10, 2010 / HR:

best one yaar… let me try to put on my blog site

thanks once again
Reply
Feb 10, 2010 / Fabrizio:

Very very Nice! I’ll try it to my site as soon as. Thank you for post.
Reply