How To Create A Login Form

How To Create A Login Form – CSS3

In this tutorial i will teach you How To Create A Login Form – CSS3.Here we are using HTML and CSS3 to accomplish this.

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How To Create Login Form - CSS3< How To Create Login Form In CSS3</title>
<link href="Style.css" rel="stylesheet" />
</head>
<body>
<div>
<h1 class="h1">How To Create Login Form - CSS3</h1>
<div class="main">
<div class="login">
<form>
<p><input type="text" name="login" placeholder="Username" /></p>
<p><input type="password" name="password" placeholder="Password" /></p>
<p class="forgot">
<label>
<a href="#">Forgot Password ?</a>
</label>
</p>
<p class="submit"><input type="submit" value="Login" /></p>
</form>
</div>
<div class="footer">
<p>&copy; 2013 All rights reserved by HighTechnology.in
<a href="http://hightechnology.in" target="_blank">HighTechnology.in</a>
| Hosting Partner <a href="http://www.grootstech.com" target="_blank">Grootstech Solutions</a>
</p>
</div>
</div>
</div>
</body>
</html>

CSS3:

body
{
margin:0px auto;
padding-top:40px;
width:980px;
font-family:Candara;
color: #fff;
background: #404040;
}
.h1
{
text-align:center;
}
.main {
  margin: 50px auto;
  width: 940px;
} 
.login {
  position: relative;
  margin: 0 auto;
  padding: 20px 20px 20px;
  width: 310px;
}
.login p.submit {
  text-align: right;
} 
::-moz-placeholder {
  color: #000 !important;
  font-size: 13px;
}
::-webkit-input-placeholder {
  color: #000;
  font-size: 13px;
}
.login:before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
} 
.login p {
  margin: 20px 0 0;
} 
.login p:first-child {
  margin-top: 0;
}
.login input[type=text], .login input[type=password] {
  width: 278px;
}
.login p.forgot {
  float: left;
  line-height: 31px;
  font-size:12px;
  padding-left:5px;
}
.login p.forgot a
{
  color:#fff;
  text-decoration:none
}
input {
  font-family:Candara;
  font-size: 14px;
}
input[type=text], input[type=password] {
  margin: 5px;
  padding: 0 10px;
  width: 200px;
  height: 34px;
  color: #404040;
  background: white;
  border: 1px solid;
  border-color: #d4d4d4;
}
input[type=text]:focus, input[type=password]:focus {
  border-color: #ff6a00;
}
input[type=submit] {
  padding: 0 18px;
  height: 29px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #404040;
  border: 2px solid #000;
  border-radius: 4px;
  outline: 0;
}
.footer
{
padding-top:40px;
text-align:center;
font-size:14px;
color:#fff;
}
.footer a
{
color:#fff;
}

How To Create A Login Form – CSS3

HTML:

CSS3:

2 replies on “How To Create A Login Form – CSS3”