Animated HTML Register Form with CSS Styling

903 codex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Register Form</title>
    <style>
        /* CSS Variables */
        :root {
            --primary-color: #5b47a9;
            --secondary-color: #e6e6fa;
            --text-color: #333;
            --border-radius: 12px;
            --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
            --shadow-heavy: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

/* Basic Reset and Body Styling */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #f0f4f8, var(--secondary-color));
            overflow: hidden;
        }

/* Form Container Animation */
        .register-container {
            background: white;
            padding: 40px 35px;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-light);
            width: 100%;
            max-width: 400px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeIn 0.8s ease-out forwards;
        }

@keyframes fadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

h2 {
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 30px;
            font-size: 1.8em;
            letter-spacing: 1px;
        }

/* Input Group Styling (Floating Labels) */
        .input-group {
            position: relative;
            margin-bottom: 35px;
        }

.input-group input {
            width: 100%;
            padding: 10px 0;
            border: none;
            border-bottom: 2px solid #ccc;
            outline: none;
            font-size: 1em;
            color: var(--text-color);
            background: transparent;
            transition: border-bottom 0.4s ease;
        }

.input-group input:focus {
            border-bottom: 2px solid var(--primary-color);
        }

/* Animated Label */
        .input-group label {
            position: absolute;
            top: 10px;
            left: 0;
            color: #999;
            pointer-events: none;
            transition: 0.3s ease-out;
        }

/* Label Animation on Focus or Content */
        .input-group input:focus + label,
        .input-group input:valid + label {
            top: -20px;
            font-size: 0.8em;
            color: var(--primary-color);
            transform: scale(0.9);
            transform-origin: left;
        }

/* Submit Button Animation */
        .register-btn {
            width: 100%;
            padding: 12px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: 600;
            margin-top: 20px;
            box-shadow: var(--shadow-light);
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
            position: relative;
            z-index: 1;
        }

.register-btn:hover {
            background-color: #6a5acd;
            transform: translateY(-3px);
            box-shadow: var(--shadow-heavy);
        }

/* Ripple Effect (Optional extra animation detail) */
        .register-btn:active {
            transform: scale(0.98);
        }

.register-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 5px;
            height: 5px;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 50%;
            opacity: 0;
            transform: translate(-50%, -50%);
            transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
            z-index: 0;
        }

.register-btn:hover::before {
            width: 300px;
            height: 300px;
            opacity: 1;
        }
    </style>
</head>
<body>

<div class="register-container">
        <h2>Create Account</h2>
        <form action="#" method="POST">
            
            <div class="input-group">
                <input type="text" id="username" required>
                <label for="username">Username</label>
            </div>

<div class="input-group">
                <input type="email" id="email" required>
                <label for="email">Email Address</label>
            </div>

<div class="input-group">
                <input type="password" id="password" required>
                <label for="password">Password</label>
            </div>

<div class="input-group">
                <input type="password" id="confirm_password" required>
                <label for="confirm_password">Confirm Password</label>
            </div>

<button type="submit" class="register-btn">
                Register Now
            </button>
        </form>
    </div>

</body>
</html>

CSS

Animated HTML Register Form with CSS Styling

Recommended