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;
}