Modern Login Form with CSS and JavaScript Animations

This example demonstrates a modern login form that opens inside an animated modal window. It features input field validation states, smooth keyframe transitions, and adapts seamlessly across different device viewports. Special focus has been placed on user interaction flows and presentation logic.

EXAMPLE

                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login System - Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="application-form-container">
        <button type="button" class="btn-open-login" 
            onclick="document.getElementById('loginModal').style.display='block'">LOGIN</button>
    
        <div id="loginModal" class="modal">
            <form id="loginForm" class="modalContent animate" action="" method="post">
                <div class="application-form-inner-box">
                    <h2 style="text-align: center; margin-bottom: 24px; font-weight: 700;">System Login</h2>
                    
                    <label for="username"><b>Username</b></label>
                    <input id="username" type="text" placeholder="Enter username" 
                        name="username" required>
    
                    <label for="password"><b>Password</b></label>
                    <input id="password" type="password" placeholder="Enter password" name="password" required>
    
                    <button type="submit" class="submitBtn">Login</button>
                    
                    <div class="remember-forgot">
                        <div class="checkbox-wrapper">
                            <input id="rememberMe" type="checkbox" name="rememberMe">
                            <label for="rememberMe">Remember me</label>
                        </div>
                        <a href="#" style="color: #007BFF; text-decoration: none; font-size: 0.9rem;">Forgot password?</a>
                    </div>
                </div>
    
                <div class="application-form-inner-box footer-box">
                    <button type="button" onclick="document.getElementById('loginModal').style.display='none'"
                            class="cancelBtn">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>
        
                    

                        .application-form-container {
    width: 100%;
}

.application-form-container *,
.application-form-container *::before,
.application-form-container *::after {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.application-form-container {
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
}

/* Styles for the initial page trigger button */
.btn-open-login {
    max-width: 200px;
    background-color: #007BFF;
    color: white;
    padding: 14px 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
}

.btn-open-login:hover {
    background-color: #0056b3 !important;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

/* Input text fields */
.application-form-container input[type=text], 
.application-form-container input[type=password] {
    width: 100%;
    padding: 12px 16px;
    margin: 8px 0 20px 0;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 6px;
    font-size: 15px;
    background-color: var(--card, #ffffff) !important;
    color: var(--fg, #1e1e1e);
    transition: all 0.25s ease;
}

.application-form-container input[type=text]:focus, 
.application-form-container input[type=password]:focus {
    border-color: #007BFF;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.application-form-container label {
    font-size: 0.9rem;
    color: var(--fg, #334155);
}

/* Main submit button inside the form overlay container */
.submitBtn {
    background-color: #007BFF !important;
    color: white;
    padding: 12px 20px;
    margin: 10px 0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.submitBtn:hover {
    background-color: #0056b3 !important;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.15);
}

/* Cancel dismiss button layout */
.application-form-container .cancelBtn {
    background-color: var(--bg, #f1f3f5) !important;
    color: var(--fg, #334155) !important;
    padding: 10px 20px;
    width: auto;
    border: 1px solid var(--border, #cbd5e1);
    font-size: 14px;
    font-weight: 600;
}

.application-form-container .cancelBtn:hover {
    background-color: #e2e8f0 !important;
    color: #000000 !important;
}

.application-form-inner-box {
    padding: 30px;
}

.footer-box {
    background-color: var(--bg, #f8f9fa); 
    border-radius: 0 0 12px 12px;
    border-top: 1px solid var(--border, #e2e8f0);
    padding: 15px 30px;
    display: flex;
    justify-content: flex-end;
}

.application-form-container .remember-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.application-form-container .checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.application-form-container .checkbox-wrapper label {
    cursor: pointer;
    user-select: none;
}

/* Modal backdrop tint overlay overlay */
.application-form-container .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    overflow: auto;
}

/* Modal form content panel layout wrapper */
.application-form-container .modalContent {
    background-color: var(--card, #ffffff);
    color: var(--fg, #1e1e1e);
    margin: 10% auto;
    width: 90%;
    max-width: 450px;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    border: 1px solid var(--border, #e2e8f0);
}

/* Zoom popup animation properties */
.application-form-container .animate {
    animation: animateZoom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes animateZoom {
    from {transform: scale(0.9); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

/* Responsive responsive adaptation rules */
@media screen and (max-width: 576px) {
    .application-form-container .modalContent {
        width: 95%;
        margin: 30px auto;
    }
    
    .application-form-inner-box {
        padding: 20px;
    }
    
    .application-form-container .remember-forgot {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .footer-box {
        padding: 15px 20px;
    }

    .application-form-container .cancelBtn {
        width: 100%;
        text-align: center;
    }
}
        
                    

RESULT

Elegant Login Form with Modal Window