Download

Creating a Stylish Login Form using CSS and JS

By the help of CSS/CSS3 now it became easy to design beautiful elements. also by the use of javascript, we can reduce server load by validating user input in client browser itself.

So, here we are going to design a beautiful login form with rounded edges and shadow, hovering and focusing effects, error messages, etc, by the help of CSS and Javscript. without veering off this, look at this example:

<div id="outer_wrap"> <div class="in_wrap">Username: <input type="text" name="username" placeholder="Username" class="input"/></div> <div class="in_wrap">Password: <input type="password" name="password" placeholder="Password" class="input"/></div> <div class="in_wrap">Remember: <input type="CHECKBOX" name="remember"></div> <div class="btn">Login</div><div class="btn">Password Recovery</div><div class="btn">Username Recovery</div><div id="msg"></div> </div>The above code is html source code for login form. this is basic login form. now we have to beautify it by defining it's style using CSS. the style code is given below: <style>#outer_wrap{ border:solid 3px Silver; box-shadow:2px 2px 5px 3px grey; border-radius:5px; margin:10px 0px 10px 0px; padding:10px; postion:fixed; max-width:350px; height:150px;} #outer_wrap div{ margin:3px;} .input{ box-shadow:inset 0px 3px 5px silver; outline:0; border:solid 1px grey; border-radius:10px; padding:2px 2px 2px 10px; width:75%; margin-left:10px; } .input:focus{ } .in_wrap{ } #outer_wrap a{ text-decoration:none; } .btn{ font-size:90%; cursor:pointer; border-radius:5px; border:solid 1px grey; Padding:2px 5px 2px 5px; background-color:silver; box-shadow:2px 2px 3px 1px silver; float:right; } .btn:hover{ background-color:grey;} </style>