CSS Login Form Easy

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">
<h1>Login</h1>
<p>Please enter your Username and <br/>password</p>
  <input class="field" type="text" placeholder="Username" id="username">  
  <input class="field" type="password" placeholder="Password" id="password">  
  <input class="chbox" type="checkbox" name "option" value="Remember">Remember Me<br/>
  <input class="btn" type="submit" value="LOGIN">
<a href="#" class="forgot">Forgot password?</a>
</div>

</body>
</html>

CSS code:

/* CSSTerm.com Easy CSS login form */

.login { 
	width:300px;
	margin:auto;
	border:1px #CCC solid;
	padding:0px 30px;
	background-color: #3b6caf;
	color:#FFF;
}

.field { 
	background: #1e4f8a;
	border:1px #03306b solid;
	padding:10px;
	margin:5px 25px;
	width:215px;
	color:#FFF;
 }

.login h1, p, .chbox, .btn {
	margin-left:25px;
	color:#fff;
}

.btn {
	background-color: #00CCFF;
	border:1px #03306b solid;
	padding:10px 30px;
	font-weight:bold;
	margin:25px 25px;
}

.forgot {
	color:#fff;
}

Previous page: CSS Simple Login Form

Next page: CSS Login Form Dark Mini