Modern Login Form Using HTML & CSS

Learn how to create a responsive modern login form using HTML and CSS.

Modern Login Form Using HTML & CSS

This Modern Login Form is built using HTML and CSS to create a clean, professional, and visually appealing authentication interface. The design focuses on simplicity, responsiveness, and modern UI elements, making it suitable for personal projects, business websites, and web applications.

The project uses advanced CSS styling techniques, smooth animations, and a responsive layout to deliver an excellent user experience across all devices. The form is designed to look elegant while remaining lightweight and easy to customize for different website designs.

Steps to Create a Modern Login Form

Follow these simple steps to build a responsive login form:

Create a project folder, for example, modern-login-form.
Inside the folder, create two files: index.html and style.css.
Design the login form structure using HTML.

                            
                                <!DOCTYPE html>

TheProviders ----------------- youtube.com/@TheProvidersOfficial


<html>
<head>
    <style></style>
	<title>Animated Login Form</title>
	<link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="container">
        <div class="logo">
            <img src="Main Logo.png" width="250px" alt="">
        </div>
        <form action="">
            <div class="user-box">
                <input type="text" name="username" required>
                <label>Username</label>
            </div>
            <div class="user-box">
                <input type="Password" name="Password" required>
                <label>Password</label>
            </div>
            <span>
                <input type="checkbox" id="chk">
                <label for="chk">Login</label>
                <div class="welcome">
                    <img src="Logo.png" alt="">
                    <h2>Wellcome to <br> The Providers Solutions</h2>
                    <a href="login page.html"> <i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true"></i></a>
                </div>
            </span>
            <a href="#">Forget password?</a>
        </form>
        <div class="social">
            <div class="heading">
                <hr><h5>Or Signin</h5><hr>
            </div>
            <div class="icons">
                <div class="fa-brands fa-facebook"></div>
                <div class="fa-brands fa-youtube"></div>
                <div class="fa-brands fa-whatsapp"></div>
                <div class="fa-brands fa-instagram"></div>
            </div>
        </div>
    </div>
    
</body>
</html>

Apply custom CSS styling to create a modern and attractive layout. Add input fields, buttons, and form elements for user authentication. Implement CSS animations and hover effects to enhance the user experience. Make the design fully responsive for desktops, tablets, and mobile devices. Save the files and open the project in a browser to view the final result.

                            
                                <style>
@import url('https://fonts.googleapis.com/css?family=Poppins');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'poppins', sans-serif;
    background: radial-gradient(circle, #832de2, #4a00e0);
}
.container{
    width: 300px;
    height: 500px;
    padding: 20px;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
form .user-box{
    position: relative;
    margin-top: 10px;
}
form .user-box input{
    width: 100%;
    padding: 10px 0;
    color: #555;
    background: transparent;
    font-size: 16px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: 2px solid #ccc;
}
form .user-box input:focus{
    border-bottom: 2px solid indigo;
}
form .user-box label{
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 16px;
    color: #555;
    pointer-events: none;
    transition: all .5s ease;
}
form .user-box input:focus ~ label,
form .user-box input:valid ~ label{
    top: -15px;
    left: 0;
    color: indigo;
    font-size: 14px;
    font-weight: bold;
}
form a{
    font-size: 12px;
    float: right;
    margin-top: 20px;
}
span{
    display: flex;
    justify-content: center;
    align-items: center;
}
span label{
    padding: 5px 50px;
    font-size: 18px;
    background-color: indigo;
    color: #fff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
}
span label:hover{
    opacity: .9;
}
.social{
    margin-top: 60px;
    cursor: pointer;
}
.heading{
    width: 100%;
    color: indigo;
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
}
hr{
    height: 3px;
    background: indigo;
    width: 30%;
}
.icons{
    font-size: 26px;
    justify-content: space-around;
    align-items: center;
    display: flex;
    margin-top: 20px;
    color: indigo;
}
.welcome{
    position: absolute;
    top: 100px;
    width: 300px;
    height: 500px;
    padding: 10px;
    display: none;
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
}
#chk{
    display: none;
}
#chk:checked ~ .welcome{
    display: block;
}
.welcome img{
    width: 100px;
    margin-left: calc(100%/3);
    transform: translateY(70px);
}
.welcome h2{
    color: indigo;
    text-align: center;
    margin-top: 80px;
}
.welcome a{
    position: absolute;
    top: 0px;
    left: 20px;
    color: indigo;
    padding: 10px;
}
</style>

Download Code Files