• 1
  • 2
Home > Tips

Exceptional Login Template - Login Template Free Download



 Exceptional Login Template - Login Template Free Download

 

   


The above is a login template, please click the demo button to view the login template or click the Download button to free download the login template.

The below passage will show you the HTML codes and CSS codes for the login template, I hope it will help you understand how to create this kind of login template or give you some inspiration on creating login template like this.



 The HTML Codes for the Login Template 

For the structure of the form, Id prefer Bootstrap. However, I use the structure written by my own to create the above login template, I think it is not difficult for you to understand it.
<div class='login-control'>
<form action='' method='get' accept-charset='utf-8' class='form-item'>
<h2>LOGIN</h2>
<div class='form-item-1'>
<input type='text' name='name' id='name' placeholder='Username'>
</div>
<div class='form-item-2'>
<input type='password' name='pwd' value='' placeholder='Password'>
</div>
<div class='form-item-3'>
<input type='checkbox' name='showpwd' value='' id='showpwd' checked=''><label for='showpwd'>Show password</label>
<a href='#' class='fr'>Forgot password?</a>
</div>
<div class='form-item-4'>
<input type='button' value='Sign In'>
</div>
</form>
</div>



 

 The CSS Codes for the above Login Template

The CSS codes for the login template are not complicated. And, I used only several CSS3 properties. The first CSS3 property I used is the CSS3 attribute selectors, the second one is the CSS3 transition property, the third one is the box-shadow property and the fourth one is using box-sizing property to modify the box module.

Now, lets see it in detail.

 body {
  background-color: #dbdbdb;

.fr {
  float: right;
}
.demo {
  margin: 50px auto;
  width: 350px;
}
.login-control {
  color: #636363;
  padding: 20px;
  line-height: 60px; 
  background-color: #323232;
  transition: all 300ms;
  font-family: 'Devonshire', cursive;
}

 

The above codes contain the common styles such as color, size, etc. And, I used an animation property:

 transition: all 300ms;

 

Using the animation property will not make the login template page blunt when it is being preloaded.

 /*Title Style */
.login-control h2 {
  color: #f1f1f1;
  font-size: 36px;
  font-weight: normal;
  line-height: 50px;
  text-align: center;
}
/*Styles of Textbox, Password Textbox*/
.login-control input[type='text'],
.login-control input[type='password'] { /*Here, I used the CSS3 attribute selectors */
  width: 100%;
  height: 40px;
  padding: 0 2px;
  border: none;
  box-sizing: border-box;/*Modify box module*/
  transition: all 300ms;/*Animation effect when the login template is being preloaded */
}
/*input get the focused effect*/
input:focus {
  outline: 0 none;
  box-shadow: 0 0 0 5px #00aec7;
}
.form-item-3 {
  text-align: left;
  line-height: 20px;
  margin-bottom: 20px;
}
/*CheckBox Style*/
.login-control input[type='checkbox'] {
  vertical-align: middle;
  margin-right: 5px;
}
/*Login Button Style */
.login-control input[type='button'] {
  color: #fff;
  font-size: 36px;
  width: 100%;
  height: 70px;
  border: none;
  background-color: #00aec7;
  cursor: pointer;
  transition: all 300ms;
  font-family: 'Devonshire', cursive;
}
.login-control input[type='button']:hover {
  background-color: #006675;
}

 

When setting the styles of the form elements, there are two properties that are very important. The first one is using box-sizing to modify the default format of box module. The second one is using box-shadow to realize the border effect.



 All CSS Codes

 body {
  background-color: #dbdbdb;

.fr {
  float: right;
}
.demo {
  margin: 50px auto;
  width: 350px;
}
.login-control {
  color: #636363;
  padding: 20px;
  line-height: 60px; 
  background-color: #323232;
  transition: all 300ms;
  font-family: 'Devonshire', cursive;
}
/*Title Style */
.login-control h2 {
  color: #f1f1f1;
  font-size: 36px;
  font-weight: normal;
  line-height: 50px;
  text-align: center;
}
/*Styles of Textbox, Password Textbox*/
.login-control input[type='text'],
.login-control input[type='password'] { /*Here, I used the CSS3 attribute selectors */
  width: 100%;
  height: 40px;
  padding: 0 2px;
  border: none;
  box-sizing: border-box; /*Modify box module*/
  transition: all 300ms; /*Animation effect when the login template is being preloaded */
}
/*input get the focused effect*/
input:focus {
  outline: 0 none;
  box-shadow: 0 0 0 5px #00aec7;
}
.form-item-3 {
  text-align: left;
  line-height: 20px;
  margin-bottom: 20px;
}
/*CheckBox Style*/
.login-control input[type='checkbox'] {
  vertical-align: middle;
  margin-right: 5px;
}
/*Login Button Style */
.login-control input[type='button'] {
  color: #fff;
  font-size: 36px;
  width: 100%;
  height: 70px;
  border: none;
  background-color: #00aec7;
  cursor: pointer;
  transition: all 300ms;
  font-family: 'Devonshire', cursive;
}
.login-control input[type='button']:hover {
  background-color: #006675;
}

 

 Contact Me for Help

I am Daniel, one of the programmers of SliceMaker Soft. If you have problems understanding the above login template or if you have some suggestions, please send me an email at: contact@slicemaker.com. I will try my best to serve you.



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0