Animated Interactive Login Form | HTML, CSS & JavaScript

<form class="login" id="loginForm" autocomplete="off">
            <h2>Login</h2>
            
            <div class="inputBx">
                <input type="text" id="username" required>
                <label>Username</label>
            </div>
            
            <div class="inputBx">
                <input type="password" id="password" required>
                <label>Password</label>
                <span class="toggle-password" id="togglePassword">Show</span>
            </div>

<div class="message-box" id="messageBox"></div>
            
            <div class="inputBx">
                <input type="submit" value="Sign in">
            </div>
            
            <div class="links">
                <a href="#" onclick="alert('Reset simulation link sent.')">Forgot Password?</a>
                <a href="#" onclick="alert('Redirecting to registration...')">Signup</a>
            </div>
        </form>
    </div>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght=0,300..800;1,300..800&display=swap");

* {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: "Open Sans", sans-serif;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #151f28;
            overflow: hidden;
        }

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

.square i {
            position: absolute;
            inset: 0;
            border: 1px solid #fff;
            transition: 0.5s;
        }

.square i:nth-child(1){
            border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
            animation: animate 6s linear infinite;
            background-color: rgb(4, 35, 84)
        }

.square i {
            border: 2px solid var(--clr);
            filter: drop-shadow(0 0 10px var(--clr));
        }

.square:hover i{
            border: 6px solid var(--clr);
            filter: drop-shadow(0 0 20px var(--clr));
        }

@keyframes animate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

@keyframes animate2 {
            0% { transform: rotate(360deg); }
            100% { transform: rotate(0deg); }
        }

.login {
            position: absolute;
            width: 300px;
            height: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

.login h2{
            font-size: 2em;
            color: #fff;
            margin-bottom: 10px;
        }

.login .inputBx{
            position: relative;
            width: 100%;
        }

/* 1. Base Input Setup */
        .login .inputBx input{
            position: relative;
            width: 100%;
            padding: 14px 20px;
            background: transparent;
            border: 2px solid #fff;
            font-size: 1.1em;
            border-radius: 40px;
            box-shadow: none;
            outline: none;
            color: #fff;
            transition: 0.3s ease;
        }

.login .inputBx input:focus {
            border-color: #35ddff;
            box-shadow: 0 0 10px rgba(255, 53, 122, 0.5);
        }

/* 2. Interactive Floating Placeholder (Label) styling */
        .login .inputBx label {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.6);
            font-size: 1.1em;
            pointer-events: none; /* Allows clicking right through the text into the input */
            transition: 0.3s ease;
            padding: 0 5px;
            background: transparent;
        }

/* 3. The Magic Animation Trigger: Triggers on focus OR when input has text (:valid) */
        .login .inputBx input:focus ~ label,
        .login .inputBx input:valid ~ label {
            top: 0;
            font-size: 0.85em;
            color: #35ddff;
            background: #151f28; /* Matches body background to mask the input line */
            border-radius: 4px;
        }

/* Adjustments for password input to prevent overlap with show/hide button */
        .login .inputBx input[type="password"],
        .login .inputBx input[data-type="password"] {
            padding-right: 55px;
        }

.login .inputBx input[type="submit"]{
            width: 100%;
            background: linear-gradient(45deg, #ff357a, #fff172);
            border: none;
            cursor: pointer;
            color: #151f28;
            font-weight: 700;
            padding: 14px 20px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            margin-top: 5px;
        }

.login .inputBx input[type="submit"]:hover {
            transform: scale(1.03);
            box-shadow: 0 0 15px rgba(255, 241, 114, 0.6);
        }

.login .inputBx input[type="submit"]:active {
            transform: scale(0.98);
        }

.toggle-password {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            font-size: 0.85em;
            user-select: none;
            transition: color 0.2s;
            z-index: 10;
        }

.toggle-password:hover {
            color: #fff172;
        }

.login .links{
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
        }

.login .links a{
            color: #fff;
            text-decoration: none;
            font-size: 0.9em;
            opacity: 0.8;
            transition: opacity 0.2s, color 0.2s;
        }

.login .links a:hover {
            opacity: 1;
            color: #35ddff;
        }

.message-box {
            color: #35ddff;
            font-size: 0.9em;
            text-align: center;
            min-height: 20px;
            width: 100%;
            transition: all 0.3s;
        }
        .message-box.success {
            color: #00ff0a;
        }

document.addEventListener('DOMContentLoaded', () => {
            const loginForm = document.getElementById('loginForm');
            const usernameInput = document.getElementById('username');
            const passwordInput = document.getElementById('password');
            const togglePassword = document.getElementById('togglePassword');
            const messageBox = document.getElementById('messageBox');

// Password Visibility Toggle
            togglePassword.addEventListener('click', () => {
                const isPassword = passwordInput.getAttribute('type') === 'password';
                passwordInput.setAttribute('type', isPassword ? 'text' : 'password');
                
                if (!isPassword) {
                    passwordInput.removeAttribute('data-type');
                } else {
                    passwordInput.setAttribute('data-type', 'password');
                }
                
                togglePassword.textContent = isPassword ? 'Hide' : 'Show';
            });

// Form Submission & Validation
            loginForm.addEventListener('submit', (e) => {
                e.preventDefault();
                
                const username = usernameInput.value.trim();
                const password = passwordInput.value.trim();

if (username.length < 4) {
                    showMessage('Username must be at least 4 characters long.', 'error');
                    return;
                }

if (password.length < 6) {
                    showMessage('Password must be at least 6 characters long.', 'error');
                    return;
                }

showMessage('Logging in...', 'success');
                usernameInput.disabled = true;
                passwordInput.disabled = true;
                
                setTimeout(() => {
                    alert(`Welcome back, ${username}!`);
                    loginForm.reset();
                    usernameInput.disabled = false;
                    passwordInput.disabled = false;
                    togglePassword.textContent = 'Show';
                    passwordInput.setAttribute('type', 'password');
                    messageBox.textContent = '';
                }, 1000);
            });

- Animated Interactive Login Form

Live Preview