Create a Stylish Login Form Using HTML and CSS

In this tutorial, we will walk through how to create a modern and stylish login form using only HTML and CSS. This guide is designed specifically for beginners, so don’t worry if you’re just starting out. By the end of this tutorial, you will have a fully functional and visually appealing login form that includes all the necessary components, such as input fields, checkboxes, and links.

What You’ll Learn:

  • How to structure the login form with HTML
  • How to style the form using CSS to create a sleek and modern look
  • How to implement icons and glass morphism effects for added flair

Step 1: Setting Up Your Project

Before we begin, create a folder for your project on your desktop. Inside the folder, add the following files:

  • An HTML file (e.g., index.html)
  • A CSS file (e.g., style.css)
  • A background image for the form (you can use any image or create your own).

Open these files in VS Code. If you’re setting up VS Code for the first time, make sure to follow the tutorial on extensions to optimize your development environment.

Step 2: Basic HTML Structure

Start by setting up the basic HTML structure for the form. Inside your index.html, add the following code:

<div class="wrapper">
    <form action="#" method="POST">
        <h1>Login</h1>
        <div class="input-box">
            <input type="text" placeholder="Username" required>
        </div>
        <div class="input-box">
            <input type="password" placeholder="Password" required>
        </div>
        <div class="remember-forgot">
            <label>
                <input type="checkbox"> Remember me
            </label>
            <a href="#">Forgot password?</a>
        </div>
        <button type="submit">Login</button>
        <div class="register-link">
            <p>Don't have an account? <a href="#">Register</a></p>
        </div>
    </form>
</div>

This is the basic structure of the login form, which includes:

  • Username and password input fields
  • Remember me checkbox
  • Forgot password link
  • Login button
  • Register link for new users

Step 3: Adding Icons

To make the form more visually appealing, you can add icons to the input fields (e.g., a user icon for the username field and a lock icon for the password field). Follow these steps:

  1. Visit Boxicons to choose your icons.
  2. Copy the font link from Boxicons and add it right below the CSS link in the HTML.
  3. Paste the icon code inside the input-box divs where you want the icons to appear.

Example:

<i class="bx bx-user"></i> <!-- User icon for the username field -->

Step 4: Styling the Form with CSS

Now, let’s style the form to give it a clean, modern look. Open your style.css file and add the following code:

/* Global Styling */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #C7F2D4; /* Light green background */
}

.wrapper {
    width: 420px;
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

h1 {
    font-size: 36px;
    text-align: center;
}

/* Input fields styling */
.input-box input {
    width: 100%;
    height: 50px;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    margin: 20px 0;
    padding: 0 40px;
    font-size: 18px;
    color: white;
}

.input-box i {
    position: absolute;
    top: 15px;
    left: 10px;
    color: white;
}

.remember-forgot {
    display: flex;
    justify-content: space-between;
    color: white;
}

button {
    width: 100%;
    padding: 12px;
    background-color: #4CAF50;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.register-link p {
    text-align: center;
    color: white;
}

.register-link a {
    color: #4CAF50;
}

/* Glassmorphism effect */
.wrapper {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.input-box input:focus {
    border-color: #4CAF50;
    color: #4CAF50;
}

Here, we:

  • Styled the form container (wrapper) to center it on the page and give it a nice border and background.
  • Added a glassmorphism effect using the backdrop-filter property.
  • Styled the input fields with icons and added padding for a better user experience.
  • Customized the submit button and the register link for a sleek design.

Step 5: Testing and Preview

After adding the HTML and CSS, open the index.html file in your browser using the Live Server extension in VS Code. You should see a stylish login form with a transparent background and blurred effect, complete with icons and modern styling.

Conclusion:

By following this tutorial, you’ve learned how to create a beautiful and functional login form with just HTML and CSS. This form is ideal for beginners and can be customized further to match your website’s design and branding. Don’t forget to add any additional features such as form validation, and integrate with back-end services when you’re ready!

Check out the full video tutorial on YouTube:
Create a Stylish Login Form Using HTML and CSS – Step-by-Step Tutorial

Happy coding!s.