CSS Login Form Dark Mini



CSS login form Dark Mini, 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 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;
}