Twitter like Login Box with Jquery & CSS ~ Web Speaks

Twitter like Login Box with Jquery & CSS

This tutorial shows a smarter way of dispalying login box in your web application. It is just similar to Twitter login box. The script is absolutely simple and easy to understand.
So enjoy the live demo...

Live Demo Download Script

HTML & Jquery Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 $(".login_btn").click(function()
 {
  $("#login_box").show();
  return false;
 });
 $("body #main").click(function()
 {
  $("#login_box").hide();
  return false;
 });
});
</script>
<body>
<div class="heading">Twitter Like Login Box with Jquery.</div>
<div id="login_btn"><a href="#" class="login_btn">Sign In</a></div>
 <div id="login_box">
  <form method="post" action="">
  <label>UserName<input type="text" name="user"/></label>
  <label>Password<input type='password' name="pass"/></label>
  <input type="submit" value=" Sing In " class="login_btn"/>
  </form>
 </div>
<div id='main'><h1><a href="www.webspeaks.in">webspeaks.in</a></h1></div>
</body>

CSS Code

#login_btn
{
margin-left:300px;
text-align:right;
width:500px;
background-color:#50D0DE;
border:1px solid #0D716F;
}
#login_box
{
width:170px;
font-family:Tahoma;
font-size:12px;
color:#0E7268;
background-color:#B3ECE4;
border:solid 2px #5ea0c1;
padding:8px;
margin-left:600px;
position:absolute;
display:none;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
.login_btn
{
background-color:#FFFFFF;
border:solid 1px #5ea0c1;
padding:3px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
#main
{
padding-left:500px;
width:100%;
height:500px;
}
.heading{
background-color:#2859AA;
border:1px solid #121649;
color:#FFFFFF;
font-weight:bold;
font-size:14px;
padding:3px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:500px;
margin-left:300px;
}