CSS Login Form Design

CSS Login Form Design

A sample of CSS form login

Demo

http://dl.dropbox.com/u/7106563/r-ednalan/login_form.html

<style type="text/css">
body{background-color:#fff;margin: 40px;font-family:Arial, Lucida Grande, Verdana, Sans-serif;font-size:12px;color:#000;}
#content {margin: 0 auto;width: 350px;border:#ccc 1px solid;background-color:#fff;padding:20px 20px 12px 20px;-moz-border-radius:7px; -webkit-border-radius:7px;}
h1{font-weight:normal;font-size:20px;color:#aaaaaa;margin:0 0 4px 0;}
p{font-size: 20px;color: #dedede;}
a {color:#729e01;text-decoration:none;}
a:hover{color:#dedede;}
input.text{ border:#ccc 1px solid;-moz-border-radius:7px; -webkit-border-radius:7px;font-size: 20px;width:300px;}
.ptour_crtbtn{border:1px outset #ccc;padding:5px 2px 4px;color:#fff;min-width: 100px;text-align: center;cursor:pointer;background:#729e01;background:-webkit-gradient(linear, left top, left bottom,from(#a3d030),to(#729e01));background:-moz-linear-gradient(top,#a3d030,#729e01);background:-o-linear-gradient(top,#a3d030,#729e01);background:linear-gradient(top,#a3d030,#729e01);-moz-border-radius:7px; -webkit-border-radius:7px;
}
</style>
<div id="content">
 <h1>Login Form</h1>
 <form action="" method="POST">
 <p><label style="display: block;">Email:</label><input class="text" type="text" name="username" /></p>
 <p><label style="display: block;">Password:</label><input class="text" type="password" name="password" /></p>
 <p><button class="ptour_crtbtn" name="login" type="submit">Login</button></p>
 </form>
 <p><a href="#">Forgot password?</a></p>
</div>