This small CSS tutorial is about to create a simple login page in HTML with CSS code. Basically, it’s a beautiful and clean design form that is easy to customize.
A few days back, I created an elegant looking login form which you should check out for more creativity. Similarly, I’ll build an HTML and CSS based login form. It will be responsive and clean. You can easily implement any kind of website.
No doubt, the login forms are most important and the first thing on any website which offers paid content or services. If you have a site that offers service or selling products than you surely want the login form should be designed in a good manner.
If you start building a form from scratch, It will take much time which you surely want to save it. If that is the case then you should go with readymade forms that take less time to implement.
All you need to copy and paste HTML and CSS code and you are done with awesome design. So, let’s start with HTML coding.
How to Create Login Page in HTML
First of all, We’ll take a look at the markup. We did keep the markup simple and easy to understand.
We did define a div with a class name simple login. This will be our main container which holds the HTML code of the form and its fields.
As the login form doesn’t have too many fields so we keep it simple with username and password input fields. And of course, the submit button should be there.
<div class="simpleLogin">
<form>
<legend>Let's Login</legend>
<fieldset>
<input id="name" placeholder="Username" type="text">
<input id="pass" placeholder="Password" type="password">
<input id="submit" type="submit" value="Log in">
</fieldset>
</form>
</div>
The CSS
The CSS for login form is also easy to understand and we first do basic styling. We have set the max-width which can be changed as you need.
I have done some general styling for form fieldset and form legend element.
.simpleLogin form {
max-width: 400px;
margin: auto;
background:#fefefd;
box-shadow: 0 10px 10px #222;
}
.simpleLogin form fieldset {
border: 0 none;
margin: 0;
padding: 20px;
}
.simpleLogin form legend,
.simpleLogin form fieldset input {
font-family: Open Sans;
font-size:15px;
}
.simpleLogin form legend {
background-color: #8fc400;
border-top: 0 none;
color: white;
display: table-cell;
padding: 10px 20px;
width: auto;
}
Now, I’ll try to keep the simple design as possible for the login form. In the following CSS, I apply some background, border, etc for input fields and submit button.
.simpleLogin form fieldset input {
width: 90%;
margin: 10px 0;
padding: 10px 5%;
border: thin #8fc400 solid;
}
.simpleLogin input[type="submit"] {
width: 100px;
float: right;
background: #8fc400;
color: white;
transition: .2s;
border: 0;
cursor:pointer;
}
.simpleLogin input[type="submit"]:focus,
.simpleLogin input[type="submit"]:hover,
.simpleLogin input[type="submit"]:active {
padding: 10px 5%;
background:#B3E226;
outline: none;
}
You are not limited to this only. You can try to add some more styling in this Login Form as you want. It’s easy to add some more color, background, and icons, etc.
We just try to keep this login form as simple as possible. I am planning to make some more login form tutorials with animations and some nice and beautiful design.
Feel free to download HTML and CSS code of this login form and don’t forget to check the demo page. I’ll try to come up with something more interesting next time.
