Nowadays, every Web Designer tries to make an attractive design that attracts users. Whether it’s about a full website or a component of a website. No doubt, each component has its own value in a website. This component can be a contact form or a login form that we can style with CSS. So, I’m here with a modern designed component “stylish login page” to share its HTML & CSS code with you.
You may have checked the live demo of this stylish login page. What’s in that? OK, before going further, let me explain a little bit about the design concept of this login page. After that, we’ll create this login page in this tutorial.
To make this login page stylish I used CSS background-image property and Font Awesome Icons library (for icons). Besides this, I used CSS color gradient background and transparency for HTML form that makes it attractive. You can use your own background image according to your website/template contents. But keep the same color combination between the form’s elements and a custom image.
How to Create a Stylish Login Page in HTML and CSS
We’ll start with an HTML structure to create a stylish login page and style it with CSS code. So, create a basic HTML form with an email, password field and submit button just like below:
<form class="codehim-form">
<div class="form-title">
<div class="user-icon gr-bg">
<i class="fa fa-user"></i>
</div>
<h2> CSS Login Form</h2>
</div>
<label for="email"><i class="fa fa-envelope"></i> Email:</label>
<input type="email" id="email" class="cm-input" placeholder="Enter your email adress">
<label for="pass"><i class="fa fa-lock"></i> Password:</label>
<input id="pass" type="password" class="cm-input" placeholder="Enter your password">
<button type="submit" class="btn-login gr-bg">Login</button>
</form>
Additionally, add other necessary elements like heading, font awesome icons in this form. Besides these elements, you can also add extra links to other pages like sign up and forget password page, etc.
CSS Styles for Login Page
OK, now its time to make our login page stylish using CSS. First of all, set a background image for the page body.
body{
background: url(../img/background.jpg) no-repeat;
background-size: 100%;
}
In the above CSS code, I set an image by its URL as a background with no-repeat value. Similarly, I defined the background-size property to make a responsive image. Here, you can also use background-image attributes instead of just background.
After that, style HTML form that has the class name “codehim-form” and its inputs.
.codehim-form{
max-width: 400px;
min-height: 400px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.6);
box-shadow: 4px 2px 16px rgba(0, 0, 0, 0.4);
border-radius: 8px;
margin: 20px auto 0 auto;
padding: 25px;
color: #414141;
}
.cm-input{
display: block;
box-sizing: border-box;
padding: 10px;
width: 100%;
margin: 14px auto;
border-radius: 20px;
border: 1px solid #ccc;
}
.cm-input:focus{
outline: 0;
border-color: #f9cb81;
}
.cm-input:invalid{
border-color: #e41b17;
}
According to the above CSS code snippet, this HTML form has 400 pixels max-width and aligns to the center of the page. Basically, the CSS margin property with the value “0 auto” centered a block element. Here, we used margin: 20px auto 0 auto; to margin 20 pixels from the top. You can use custom values to adjust the login form.
Now, we’ll design the submit button. We’ll display it as a block element with 100% width to fully fit in our login form.
/* Login Button Design */
.btn-login{
display: block;
width: 100%;
padding: 10px;
border: 0;
color: #fff;
border-radius: 20px;
cursor: pointer;
}
.btn-login:focus{
outline: 0;
}
.btn-login:hover{
opacity: 0.8;
transition: .3s;
}
/* Gradient Background */
.gr-bg{
background: rgb(252,205,128);
background: linear-gradient(90deg, rgba(252,205,128,1) 0%, rgba(209,122,142,1) 55%, rgba(220,159,174,1) 100%);
}
I kept a separate class for the gradient background. It is because you can easily switch between colors (by using another gradient color class) according to your needs.
OK! finally, define some values for the heading/title of the form and user icon.
/* For, tiele */
.form-title{
padding: 12px;
text-align: center;
position: relative;
}
.form-title h2{
color: #5c86e1;
}
.form-title .user-icon{
position: absolute;
font-size: 42px;
color: #fff;
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
border-radius: 45px;
top: -60px;
left: -45px;
}
The user icon is shown in a CSS based circle on the top left corner of the login form. You can show it anywhere like top right or wherever you want. To do so, just update the top and left values (or define right or bottom) in the above CSS code snippet. Generally, this icon doesn’t do anything in the login form. However, you can remove it or place a link behind it to make it useful.
I hope, you find this tutorial helpful to complete the design of your login page. If you have any questions or suggestions about this login page design, let me know by comment below.
