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.

HTML

CSS

jQuery

Call jQuery in <head></head> tags of the document
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>

View Demo

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

63 thoughts on “An easy way to create login panel with jQuery and CSS”

  1. Fabrizio says:

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

  2. HR says:

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

    thanks once again

    1. KeithM says:

      Simple and elegant slide-in. Very fluid. Easy to customise. Love it. Thanks for posting.

  3. Sean says:

    Sweeet. I’ve come across similar tutorials but I really like the way this one works. Code looks clean. Thanks.

  4. Tanks a lot for this post.
    I like simple login panel.

  5. 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?

    1. CSSJockey says:

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

  6. Cihat says:

    thank you for post it is very nice thanks again

  7. Rahim Afghan says:

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

    1. CSSJockey says:

      Sure, you are free to use this code on any project you do πŸ™‚

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

  9. 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 ?

  10. 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!

    1. CSSJockey says:

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

  11. 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!

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

    1. CSSJockey says:

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

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

    1. CSSJockey says:

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

  14. Achumbra says:

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

    thank you.

    1. CSSJockey says:

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

  15. csska says:

    good post to create best admin panel)

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

    1. CSSJockey says:

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

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

    1. CSSJockey says:

      You can edit the CSS and remove the styles.

  18. 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!

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

  19. Shashwat says:

    Thanks you for sharing this code its working great …

  20. yogesh kanthale says:

    its really helpful thanks for that

  21. Yogesh Singh says:

    very use full dude !!!! thanks

  22. Surge says:

    Great post, it is nice to have people sharing good code to help the community.

    1. CSSJockey says:

      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 πŸ˜‰

  23. Anders says:

    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?

    1. CSSJockey says:

      Nope its not hard, you can use jQuery mouseout event to accomplish this task.

  24. saboo says:

    very nice

  25. Nitesh Chauhan says:

    hello, this post was really amazing.. thanx i am not into UI development but i am intrested in learning it. this was helpful.

  26. cye says:

    i’m going to use this.. thanks!!!

  27. sayid says:

    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 πŸ™‚

  28. pramod says:

    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

  29. Rakesh Mishra says:

    Thanks.

  30. Guy says:

    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;
    });

  31. Shubhamoy says:

    Hi Mohit,

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

    BR,
    Shubhamoy

  32. Chris says:

    Lovely tutorial – have implemented it on my site.

    Thanks.

  33. vem says:

    ..thank yo for this code it will help me to finish my project..keep on posting like this code
    God bless

  34. Mark says:

    Simple and works perfectly, awesome job and thanks!

  35. heng says:

    pretty cool login! i will use this for my website.

  36. Web Design Lancashire says:

    A perfect little addition to any website. Thanks for sharing.

  37. Pedro says:

    I really like your post works fantactic. Just wondering if you could of help with this. I woul like to add a feature to javascript so the user can close the pop up log in box by clicking outside of it rather then using esc or to have both options? thanks

    1. Mohit Aneja says:

      For this you can use use CSS or jQuery :hover to show the inner DIV, remember you need to add hover to the parent and it should wrap the form and other stuff.

  38. autism treatments says:

    I just couldn’t go away your website prior to suggesting that I really enjoyed the usual information a person provide for your visitors? Is gonna be back frequently in order to check up on new posts

  39. jamie says:

    Luv this code, but how do I set the username and password?
    How can I redirect the page after logging in?
    Please help!

    1. Mohit Aneja says:

      You would need to use server side language like PHP or ASP.net for that functionality.

  40. Thirry says:

    Where do you place these files and will it connect to either wp_members or s2members?

  41. haitham says:

    hello i want to use such thing in my web site
    but i reall dunno why u type css and jquery code like this i cant eveb read and why between %%

  42. Draveos says:

    Thanks so much for this code snippet. Works great and adds a modern look to any website lacking creativity! πŸ™‚

  43. Sourabh says:

    I had created jquery.js file and called from html page inside head tag but it is not excecuting can you send me steps how to execute.

    1. Mohit Aneja says:

      Once you embed jQuery in the head tags, create another file for the website to write your own JS code. Make sure you call that file below the jquery script tag.

  44. Barb says:

    Hi there would you mind letting me know which web host you’re working with? I’ve loaded your blog in 3 different web browsers and I must say this blog loads a lot quicker then most. Can you suggest a good internet hosting provider at a reasonable price? Many thanks, I appreciate it!

    1. Mohit Aneja says:

      I use Hostgator, but mostly its the code that makes it faster.

  45. kamran pakistani says:

    nice sir .thanxs

  46. stupil says:

    super,thanks you

Leave a Comment

Your email address will not be published.*

*