CSS Login Form Dark Mini

Simple login "Dark Mini" form created using HTML and CSS. Form can be used as registration form as well. 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 Dark Mini</title>
</head>
<body>

<div class="login">
  <input class="field" type="text" placeholder="Username" id="username">  
  <input class="field" type="password" placeholder="Password" id="password">  
  <input class="btn" type="submit" value="LOGIN">
  <a href="#" class="forgot">Register</a> | 
  <a href="#" class="forgot">Forgot password?</a>
</div>

</body>
</html>

CSS code:

/* CSSTerm.com CSS login form Dark Mini */

.login { 
	width:280px;
	margin:auto;
	border:1px #CCC solid;
	padding:30px;
	background-color: #29363f;
	color:#FFF;
	text-align:center;
}

.field, .btn {
	border:1px #525d65 solid;
	padding:10px;
}

.field { 
	background: #29363f;
	margin:5px 25px;
	width:216px;
	color:#FFF;
}

.login h1, .login p, .btn, .forgot { color: #CCC; }

.btn {
	background-color: #29363f;
	font-weight:bold;
	margin:10px 25px;
	width:238px;
}

Previous page: CSS Login Form Easy

Next page: CSS Login Form Dark Maxi