Creating 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.

Author: CSSJockey

Mohit is a freelance web designer/developer based in Chandigarh India. He founded CSSJockey.com on Jan 01, 2009, since then he is serving clients from all over the world. Follow on Twitter | Connect via Facebook | Read more »

32 Responses to “An easy way to create login panel with jQuery and CSS”

10 Aug, 2010

Shashwat says:

Thanks you for sharing this code its working great …

03 Aug, 2010

Philip says:

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!

05 Aug, 2010

CSSJockey says:

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.

24 Jul, 2010

Ardy says:

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

25 Jul, 2010

CSSJockey says:

You can edit the CSS and remove the styles.

06 Jul, 2010

Naples web design says:

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.

08 Jul, 2010

CSSJockey says:

I m glad you like it.. stay tuned for more…

27 Jun, 2010

csska says:

good post to create best admin panel)

18 Jun, 2010

Achumbra says:

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

thank you.

22 Jun, 2010

CSSJockey says:

You can add any form tags in the HTML code and add functionality as per your requirements.

26 May, 2010

Hans says:

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

26 May, 2010

CSSJockey says:

Thanks, I am glad you like it.. Stay tuned for more..

22 May, 2010

Aminul Islam Sajib says:

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.

24 May, 2010

CSSJockey says:

I’m sure this website will help you learn the basics: http://www.w3schools.com/ check it out!!

20 May, 2010

Web Design Preston says:

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!

13 May, 2010

Francisco Schiltz says:

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!

16 May, 2010

CSSJockey says:

Thanks, I am glad you like what I share..

27 Apr, 2010

alice@postalgold says:

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 ?

24 Apr, 2010

Master says:

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

21 Apr, 2010

Rahim Afghan says:

Thank you, it looks great. Can I use it for commercial sites?

19 May, 2010

CSSJockey says:

Sure, you are free to use this code on any project you do

09 Mar, 2010

Cihat says:

thank you for post it is very nice thanks again

24 Feb, 2010

vector graphics says:

very nice panel thanks

19 Feb, 2010

Web Design Manchester says:

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?

19 Feb, 2010

CSSJockey says:

You can use Ajax with jQuery or other frameworks to handle errors and other actions.