5 Easy Steps to Create an Animated Login Form using HTML CSS and JavaScript

Learn how to create a modern animated login form using HTML, CSS, and JavaScript. This project features a dark UI, glowing effects, and responsive design—perfect for beginners and portfolio projects.

A login form is one of the most important components of any website or web application. A well-designed login page not only improves user experience but also gives your project a professional look.

In this tutorial, we will build a modern animated login form using HTML, CSS, and JavaScript. The design is inspired by a dark UI theme with glowing circular animations, smooth input fields, and interactive buttons—perfect for portfolios, client projects, or practice.

This project is beginner-friendly and focuses on UI design, animations, and clean layout structure.

🎥 Animated Login Form Project Explained | HTML CSS JS

If you prefer learning visually, this Animated Login Form project is also explained in a step-by-step video tutorial.

In this video, we build a modern Animated Login Form using HTML, CSS, and JavaScript, where you’ll see how smooth animations, form interactions, and UI effects work in real time, along with a clear explanation of each part of the code.

👉 Watch the complete tutorial in the video below to understand the structure, animations, and JavaScript logic behind the login form.

🧱 HTML Source Code – Animated Login Form Structure

The HTML part of this Animated Login Form project defines the basic structure of the login UI.
It includes the form container, input fields for email and password, labels, icons, and the submit button.

This semantic and well-structured HTML layout makes the login form accessible, SEO-friendly, and easy to style.
All animations and interactions are later enhanced using CSS and JavaScript, while HTML keeps the markup clean and readable.

👉 Below, you can find the complete HTML source code used in this animated login form.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Login Form || CodeByGaurav</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="circle-container" id="circleContainer"></div>
        <div class="login-box">
            <h2>Login</h2>

            <form action="" id="loginForm">
                <div class="input-group">
                    <input type="email" placeholder="Email" required>
                    <span class="input-icon">
                        <i class="fa-solid fa-envelope"></i>
                    </span>
                </div>

                <div class="input-group">
                    <input type="password" placeholder="Password" required>
                    <span class="input-icon">
                        <i class="fa-solid fa-lock"></i>
                    </span>
                </div>

                <div class="forget-password">
                    <a href="#">Forget Your Password ?</a>
                </div>

                <button type="submit" class="login-btn">LOGIN</button>
            </form>

            <div class="social-login">
                <p>log in with</p>
                <div class="social-icons">
                    <div class="social-icon facebook">F</div>
                    <div class="social-icon twitter">X</div>
                    <div class="social-icon google">G</div>
                </div>
            </div>

            <div class="signup-link">
                <a href="#">Sign Up</a>
            </div>

        </div>
    </div>
</body>
<script src="script.js"></script>
</html>

🎨 CSS Source Code – Styling & Animation Effects

CSS is responsible for the modern UI design and smooth animations of the Animated Login Form.
Using pure CSS, we add transitions, hover effects, floating labels, and responsive layout adjustments.

This project uses:

CSS transitions & transforms
Flexbox for alignment
Custom colors and shadows for a modern look

The CSS code ensures the login form looks professional on all screen sizes and provides a smooth user experience without using any external libraries.

👉 Below is the full CSS code used to style and animate the login form.

				
					*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(135deg, #1e2a3a 0%, #2d3e50 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
}

.container{
    position: relative;
    width: 340px;
    height: 340px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-container{
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotate 20s linear infinite;

}

@keyframes rotate {
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}

.login-box{
    position: relative;
    z-index: 10;
    background: rgba(30, 42, 58, 0.95);
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    width: 420px;
}

h2{
    text-align: center;
    color: #ffa500;
    margin-bottom: 30px;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.input-group{
    position: relative;
    margin-bottom: 25px;
}

.input-group input{
    width: 100%;
    padding: 12px 40px 12px 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 25px;
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.input-group input:focus{
    border-color: #ffa500;
    box-shadow: 0 0 15px rgba(255, 165, 0, 0.3);
}

.input-group input::placeholder{
    color: rgba(255, 255, 255, 0.5);
}

.input-icon{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
}

.forget-password{
    text-align: right;
    margin-top: -15px;
    margin-bottom: 25px;
}

.forget-password a{
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 12px;
    transition: color 0.3s ease;
}

.forget-password a:hover{
    color: #ffa500;
}

.login-btn{
    width: 100%;
    padding: 14px;
    background: linear-gradient(90deg, #ffa500, #ff8c00);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.login-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 165, 0, 0.5);
}

.login-btn::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.login-btn:active::before{
    width: 300px;
    height: 300px;
}

.social-login{
    margin-top: 25px;
    text-align: center;
}

.social-login p{
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    margin-bottom: 15px;
}

.social-icons{
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icon{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    color: #fff;
}

.social-icon.facebook{
    background: #3b5998;
}

.social-icon.twitter{
    background: #000;
}

.social-icon.google{
    background: #db4437;
}

.social-icon:hover{
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.signup-link{
    text-align: center;
    margin-top: 25px;
}

.signup-link a{
    color: #ffa500;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.signup-link a:hover{
    color: #ff8c00;
    text-decoration: underline;
}

.toggle-password{
    cursor: pointer;
}

.bar{
    position: absolute;
    width: 8px;
    height: 35px;
    background: #4a5f7f;
    border-radius: 4px;
    top: 0;
    left: 50%;
    transform-origin: center 170px;
    transition: background 0.3s ease;
}

.bar.active{
    background: linear-gradient(180deg, #ffa500, #ff8c00);
    box-shadow: 0 0 20px rgba(255,165, 0, 0.8);
}

Tools & Resources That Support My Web Development Work

Discover the exact hardware and services I use daily — from laptops and keyboards to hosting and domains.

⚙️ JavaScript Source Code – Form Interaction Logic

JavaScript adds the interactive behavior to this Animated Login Form.
It handles input focus effects, validation logic, and dynamic class toggling to trigger animations at the right time.

With simple and beginner-friendly JavaScript:

Form inputs respond smoothly to user actions
Animations feel more natural
UI behavior improves without over-complicating the code

This makes the project perfect for beginners who want to learn how HTML, CSS, and JavaScript work together in real-world UI components.

👉 Below is the JavaScript source code used in this project.

				
					const circleContainer = document.getElementById("circleContainer");

const numBars = 50;
let activeBars = 0;

for(let i = 0; i < numBars; i++){
    const bar = document.createElement("div");
    bar.className = "bar";
    bar.style.transform = `rotate(${(360 / numBars) * i}deg) translateY(-170px)`;
    circleContainer.appendChild(bar)
}

function animateBars(){
    const bars = document.querySelectorAll(".bar");

    setInterval(()=>{
        bars[activeBars % numBars].classList.add("active");

        if(activeBars > 8){
            bars[(activeBars - 8) % numBars].classList.remove("active");
        }

        activeBars++;

    }, 100);
}

animateBars();

✅ Conclusion

This Animated Login Form project using HTML, CSS, and JavaScript is a great practice example for beginners and frontend developers.
It helps you understand UI structure, styling, animations, and basic JavaScript interactions in a single project.

You can further enhance this project by adding:

Form validation
Backend authentication
Dark/Light mode toggle

If you found this project helpful, don’t forget to check the video tutorial, download the source code, and try customizing the design on your own 🚀

Tools & Resources That Support My Web Development Work

Discover the exact hardware and services I use daily — from laptops and keyboards to hosting and domains.

4 Comments

Okasha


January 4, 2026, 4:43 am

This is so amazing
- Gaurav Sisodiya
  
  
  January 4, 2026, 12:18 pm
  
  Thank you so much! 🙌 Really glad you loved it.
saiful islam


April 1, 2026, 1:04 pm

Saifyl
fintechbase


June 22, 2026, 8:22 pm

һello!,I love your writіng very much! proportion we be in contact еxtra about your article on AOL?
I need an expert in this area to solve my problem.

May be that’s yօu! Takіng a look aһead to see you.

my web-site fintechbase

🎥 Animated Login Form Project Explained | HTML CSS JS

🧱 HTML Source Code – Animated Login Form Structure

🎨 CSS Source Code – Styling & Animation Effects

Tools & Resources That Support My Web Development Work

⚙️ JavaScript Source Code – Form Interaction Logic

✅ Conclusion

Tools & Resources That Support My Web Development Work

4 Comments

Leave a Reply Cancel reply

Gaurav Sisodiya

CodeByGaurav

Connect With Me