An easy way to create a login panel with jQuery and CSS

Spread the love

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.


<div id="demo-header">

	<!-- Code for Login Link -->
	<a id="login-link" title="Login" href="#login">Clients Area</a>

	<!-- Code for login panel -->
	<div id="login-panel">
		<form action="" method="post">
			<label>Username: <input type=text name=username value="" /> </label>
			<label>Password: <input type=password name=password value="" /> </label>
			<input type=submit name=submit value="Sign In" /> <small>Press ESC to close</small>



<style type=text/css>


        width: 980px;
        margin: 0 auto;
        position: relative;
        position: absolute;
        top: 0px;
        right: 0px;
        display: block;
        background: #2a2a2a;
        padding: 5px 15px 5px 15px;
        color: #FFF;
        position: absolute;
        top: 26px;
        right: 0px;
        width: 190px;
        padding: 10px 15px 5px 15px;
        background: #2a2a2a;
        font-size: 8pt;
        font-weight: bold;
        color: #FFF;
        display: none; 
        line-height: 1.8;


<script src=//></script>
<script type=text/javascript>

	// jQuery to apply actions to the link

	//jQuery to apply actions to the ESC key
	$(document).keydown(function(e) {
	    if (e.keyCode == 27) {

Contact Us

See Our Portfolio

One response to “An easy way to create a login panel with jQuery and CSS”

  1. Hi there! Would you mind if I share your blog with my facebook group? There’s a lot of people that I think would really appreciate your content. Please let me know. Thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

Enquiry Now

Our consultants will respond back within 8 business hours or less.