Login Form Design in HTML and CSS: A Step-by-Step Tutorial.

Author - Maketechstuff
August 14, 2023
0

Learn how to create a beautiful login form in HTML and CSS. This step-by-step tutorial covers everything you need to know, from creating the basic markup to adding custom styling. By the end of this post, you'll be able to create a stylish login form. I have already shared blog post on many login forms design and some with backend functionality (PHP & MySQL) you can search it out. 


The login form design is more of suits for forest or deserts website login page. However, you can change image and the looks and feels will be change.


This login form design have an image on one side and on login form on another side. You can see design in below image.


login form design in html and css


This login form has:

  • Image for designing purpose.
  • Two input fields (for username and password).
  • Button.
  • Some links (forgot password, terms and conditions, sign up, contact us etc).


Video Tutorial On Login Form Design:



Login Form Design In HTML & CSS.

To create this login form. First create one folder and open it in your code editor. Now after opening it. Create two files (html and CSS extension) and one folder (for image) in that folder.


Now let's start create this login from design step by step.


Step 1: Create basic structure.

Create basic structure of html.


HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form Design</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    


</body>
</html>

CSS


*{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}
body{
    width: 100%;
    height: 100vh;
    background-color: #fff8e1;
    display: flex;
    align-items: center;
    justify-content: center;
}

Output:


login form design in html and css


Step 2: Add image in login form.

As we going to add image on one side and login form on another side. So, we going to add image first inside a an element with class="container".


HTML


    <div class="container">

        <div class="image_box">
            <img src="tree.png">
        </div>

        

    </div>

CSS


.image_box{
    width: 400px;
    height: 600px;
    position: relative;
    background-color: #ffcc80;
    border-radius: 20px;
    margin: 10px;
    overflow: hidden;
}
.image_box img{
    position: absolute;
    top: 60%;
    left: 40%;
    width: 1250px;
    transform: translate(-50% , -50%);
}

Output:


image for login form design



Step 3: Create login form.

After adding image one side. Now we going to create login form on another side.


Let's first create title for login form.


HTML


    <div class="container">

        <div class="image_box">
            <img src="tree.png">
        </div>

        <div class="box">
            <h2>Login</h2>

        </div>

    </div>

CSS


.box{
    width: 400px;
    margin: 10px;
    padding: 15px;
}
h2{
    text-align: center;
    font-size: 40px;
    margin-bottom: 60px;
    position: relative;
}
h2::before{
    position: absolute;
    content: "";
    width: 55px;
    height: 6px;
    border-radius: 100px;
    background-color: #ffb74d;
    bottom: -8px;   
}

Output:


login form design in html and css



Now let's create login form below the title.

So, we going to add some elements like:

  • Input fields with floating placeholder.
  • Show and hide password options (Its not functional but if you want to make it. Here is blog post on show and hide password with checkbox).
  • Forgot password link.
  • Terms and conditions link. (I have added terms and condition of signup form). You can remove it.
  • Button for login.
  • Sign up link. So that user can go to signup page.
  • Contact link. To go to contact page.


So, let's create it.


HTML


            <form action="#">

                <div class="input_box">
                    <input type="text" required>
                    <label>Username</label>
                </div>

                <div class="input_box">
                    <input type="text" required>
                    <label>Password</label>
                </div>

                <label class="checkbox"><input type="checkbox"><p>Show Password</p></label>

                <div class="forgot_password_box">
                    <div class="forgot_password"><a href="#">Forgot Password?</a></div>
                </div>

                <div class="link_box">
                    <div class="link">By creating an account you agree to <a href="#">Terms & Conditions</a></div>
                </div>

                <button class="login_button" type="submit">Login</button>

                <div class="link_box">
                    <div class="signup_link">Don't have an account? <a href="#">Sign Up</a></div>
                    <div class="contact_link">Need Help? <a href="#">Contact Us</a></div>
                </div>

            </form>

CSS


.box form .input_box{
    width: 100%;
    text-align: center;
    border-bottom: 2px solid #ffb74d;
    margin-top: 35px;
    margin-bottom: 10px;
    position: relative;
}
.box form .input_box input{
    width: 100%;
    font-size: 24px;
    padding: 6px 0px;
    outline: none;
    border: none;
}
.box form .input_box label{
    position: absolute;
    left: 0px;
    top: 10px;
    font-size: 25px;
    color: #aaaaaa;
    pointer-events: none;
    transition: 0.2s;
}
.box form .input_box input:focus + label,
.box form .input_box input:valid + label{
    top: -18px;
    color: #ffb74d;
    font-size: 18px;
}
.box form .checkbox{
    display: inline-flex;
    font-size: 16px;
    cursor: pointer;
}
.box form .checkbox p{
    margin-left: 8px;
}
.box form .forgot_password_box{
    width: 100%;
    text-align: right;
    margin-top: 20px;
}
.box form .forgot_password_box .forgot_password a{
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    color: #ffb74d;
    text-decoration: none;
    transition: 0.2s;
}
.box form .login_button{
    width: 100%;
    background-color: #ffb74d;
    border: none;
    font-size: 25px;
    font-weight: bold;
    padding: 10px 16px;
    margin-top: 30px;
    border-radius: 100px;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}
.box form .login_button:active{
    transform: scale(0.9);
}
.box form .link_box{
    width: 100%;
    text-align: center;
    margin-top: 30px;
}
.box form .link_box .signup_link,
.box form .link_box .link,
.box form .link_box .contact_link{
    font-size: 16px;
    margin-top: 10px;
}
.box form .link_box .signup_link a,
.box form .link_box .link a,
.box form .link_box .contact_link a{
    text-decoration: none;
    color: #ffb74d;
    font-size: 18px;
    font-weight: bold;
    transition: 0.2s;
}

.box form .link_box .signup_link a:hover,
.box form .link_box .link a:hover,
.box form .link_box .contact_link a:hover,
.box form .forgot_password_box .forgot_password a:hover{
    text-decoration: underline;
}

Output:


login form design in html and css


You can remove or change the terms and condition link that I have added.


Here login form design is completed. I hope you learn how to make login form design with image on side and login form on another side.


You can see demo in above YouTube video.


You may like:

  1. How to create animated login and registration form using HTML CSS & JavaScript.
  2. How to make a sliding login and registration form using HTML CSS and JavaScript.
  3. How to create a simple signup and login page using HTML and CSS.
  4. How to create an transparent contact us page using HTML & CSS.
  5. How to create a login and logout backend functionality using PHP and MySQL with prepared statement.
  6. How to create registration form using PHP & MySQL.


Final code:



So that's how you can make beautiful login form design using only HTML and CSS. If you have any questions or suggestions you can write in the comment section.


Tags

You may like these posts

Show more

Post a Comment

0Comments

Share your thoughts.

Post a Comment (0)
Share to other apps
Copy Post Link
To Top