Elevate User Engagement: Crafting a Stunning Login Form using HTML and CSS

User authentication is a fundamental aspect of many websites and applications. In this tutorial, we'll guide you through the process of building a sleek and user-friendly login form using HTML and CSS. By the end of this guide, you'll have a well-designed login form that not only enhances the user experience but also strengthens the security of your site.

Must Read: Wavy Loading Animation using HTML and CSS only

The provided HTML code structures a comprehensive login form. 

<div class="main-container">
    <div class="form-container">
        <div class="content">
            <span class="title-text">Login</span>
            <form class="login-form">
                <div class="field">
                    <input required="" type="text">
                    <label>Email</label>
                </div>
                <div class="field">
                    <input required="" type="password">
                    <label>Password</label>
                </div>
                <div class="action">
                    <label><input type="checkbox">Remember me</label>
                    <a class="forget" href="">Forget password ?</a>
                </div>
                <button class="login">Login</button>
                <div class="signup">Don't have an Account ? <a href="">Sign up</a></div>
            </form>
        </div>
    </div>
</div>

The main container that can be positioned on your web page to display the login form. Inside the main container, we have a form container that holds our login form. Within the form container, we have the content of the form, including a title, form elements, and links. The element with the class "title-text" displays the title "Login."

Moreover, we have a form with the class "login-form" that encapsulates the login inputs and buttons. The elements with the class "field" are the form fields for email and password, each consisting of an input element and a label. 

Read More: Interactive Credit Card using HTML, CSS and JavaScript

There is another section with the class "action" includes a "Remember me" checkbox and a "Forgot password?" link. There is login button which allows users to submit the login form. Below the form, there's a link to sign up if the user doesn't have an account yet.

To style our login form, we'll apply CSS styles, which can be customized to match your website's design.

body {
    background: #212121;
}

.main-container {
    display: flex;
    min-height: 100vh;
    min-width: 450px;
    align-items: center;
    justify-content: center;
}

.form-container {
    width: 350px;
    display: flex;
    position: relative;
}

.form-container::before,.form-container::after{
    content: '';
    border-radius: 50%;
    height: 30px;
    width: 30px;
    position: absolute;
    animation: floating 3s ease-in-out infinite alternate;
}

.form-container::before {
    top: 18px;
    background: #f3e125;
    box-shadow: 20px 0px 50px 40px #f3e125;
}

.form-container::after {
    right: 0;
    z-index: -1;
    bottom: 18px;
    background: #29b4ff;
    box-shadow: -20px 0px 50px 40px #29b4ff;
}

input:focus {
    outline: none;
}

.content {
    width: 100%;
    font-size: 2rem;
    padding: 1.5rem;
    border-radius: 15px;
    font-family: 'calibri';
    background: #62626212;
    backdrop-filter: blur(30px);
    border: 1px solid #626262c2;
}

.title-text {
    color: white;
    display: block;
    text-align: center;
}

.field {
    position: relative;
}

.field label {
    bottom: 0;
    z-index: -1;
    transition: .4s;
    position: absolute;
    margin-bottom: 5px;
}

.field input {
    width: 100%;
    border: none;
    padding: 5px 0;
    color: white;
    margin-top: 32px;
    background: none;
    border-bottom: 1px solid #3f3f3f;
}

.field input:focus+label,
.field input:valid+label {
    bottom: 25px;
    font-size: 13px;
}

.action {
    display: flex;
    margin: 10px 0 30px;
    justify-content: space-between;

}

label {
    display: flex;
    cursor: pointer;
    font-size: 14px;
    color: #d0d0d0;
}

label input {
    margin-right: 3px;
    cursor: pointer;
}

.forget,
.signup a {
    color: white;
    font-size: 14px;
    text-decoration: none;
}

.forget:hover,
.signup a:hover {
    color: rgb(186, 186, 186)
}

.login {
    width: 100%;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: .3s;
    font-weight: bold;
    padding: 6px 18px;
    border-radius: 30px;
    background: #ffffff;
}

.login:hover {
    transform: scale(0.95);
}

.signup {
    color: #bcbcbc;
    font-size: 14px;
    text-align: center;
    margin-top: 25px;
}

@keyframes floating {
    from {
        transform: scale(0.7);
    }

    to {
        transform: scale(1);
    }
}

By following this post, you're able to create a professional structure for a user-friendly login form using HTML and CSS. User authentication is a critical aspect of web development, and a well-designed login form can make a significant difference in user experience.

Feel free to expand on this foundation by adding more styling, validation, and backend integration to create a fully functional login system for your website.  

Remember that every project is a learning opportunity. Whether you're building a simple login form or a complex web application, each step you take contributes to your growth as a web developer. Embrace the challenges, celebrate your successes, and keep pushing the boundaries of what you can create on the web.

Ready to embark on your next web development project? Share your thoughts, experiences, and creations in the comments below, and let's continue to explore the boundless possibilities of the web.

Download