How to Create an Animated Login Form Using HTML and CSS

An animated login form not only enhances the visual appeal of your website but also improves user interaction and engagement. In this tutorial, we will guide you through creating a sleek and modern animated login form using HTML and CSS. No JavaScript is required for this design, making it lightweight and efficient.

Why Use an Animated Login Form?

An animated login form offers several benefits:

Enhanced User Experience: Animations create a smoother interaction, making the form more appealing to users.
Modern Design: Adds a professional look to your website, aligning with modern UI/UX trends.
Lightweight and Fast: With just HTML and CSS, the form is fast to load and responsive.

Step-by-Step Guide

Step 1: HTML Structure

We’ll start by setting up the basic HTML structure for our 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</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <form class="login-form">
            <h2>Login</h2>
            <div class="input-box">
                <input type="text" required>
                <label>Username</label>
            </div>
            <div class="input-box">
                <input type="password" required>
                <label>Password</label>
            </div>
            <button type="submit">Login</button>
        </form>

    </div>
</body>
</html>

Key Points:

div.login-container: Contains the form and centers it on the screen.
Labels: Used for animation when the input fields are focused or filled.

Step 2: CSS Styling

Next, we’ll style the login form and add animations to the labels.

/* styles.css */
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: Arial, sans-serif;
    background: linear-gradient(16deg, #E91E63, #673AB7);
}

.login-container {
    width: 90%;
    max-width: 50%;
    background: white;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.login-form h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.input-box {
    position: relative;
    margin-bottom: 20px;
}

.input-box input {
    width: 100%;
    padding: 10px 10px 10px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid #ccc;
    outline: none;
    font-size: 16px;
    color: #333;
}

.input-box label {
    position: absolute;
    top: 10px;
    left: 0;
    color: #aaa;
    font-size: 16px;
    transition: 0.3s;
}

.input-box input:focus ~ label,
.input-box input:valid ~ label {
    top: -20px;
    left: 0;
    color: #2980b9;
    font-size: 14px;
}

button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: #2980b9;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

button:hover {
    background: #2471a3;
}

Key Features:

Input Fields: Animated labels move when the user interacts with the input fields.
Responsive Design: The form adapts to different screen sizes.
Hover Effects: Buttons change color when hovered over.

An animated login form is a fantastic way to modernize your website and engage users. By using just HTML and CSS, you can create a lightweight and visually appealing design. Experiment with the colors and styles to match your website’s theme.

Categories