CSS Simple Login Form

CSS Login Form Easy, compatible with all major browsers. Pure CSS no images or javascript.

Demo:

How to use:

Open text editor like Notepad or any other.
Copy HTML code and paste into the text editor.
Save file as anyname.html or anyname.htm
Create new document.
Copy and paste CSS code into text editor.
Save file as login.css

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="login.css" />
<title>CSS Login form</title>
</head>
<body>

<div class="login">
  <input type="text" placeholder="Username" id="username">  
  <input type="password" placeholder="Password" id="password">  
    <input type="submit" value="Sign In">
    <a href="#" class="forgot">forgot password?</a>
</div>

</body>
</html>

CSS code:

/* CSSTerm.com Simple CSS login form */

.login { 
	height:110px;
	width:190px;
	margin:auto;
	border:1px #CCC solid;
	padding:10px;
}

.login input { 
	padding:5px;
	margin:5px
 }

Previous page: CSS Login forms

Next page: CSS Login Form Easy