Animated HTML Register Form

Open In Editor Publish Your Code

<!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>
        /* Basic Reset & Body Styling */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: #333;
            overflow: hidden; /* Prevent scrollbar during initial animation */
        }

/* Form Container */
        .register-container {
            background-color: #fff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
            text-align: center;
            box-sizing: border-box;
            opacity: 0; /* Start hidden for animation */
            transform: translateY(20px); /* Start slightly below for slide-up effect */
            animation: fadeInSlideUp 0.8s ease-out forwards;
            animation-delay: 0.2s; /* Delay the main form animation slightly */
        }

/* Animation Keyframes for main container */
        @keyframes fadeInSlideUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* Form Title */
        .register-container h2 {
            margin-bottom: 30px;
            color: #333;
            font-size: 2em;
            letter-spacing: 1px;
            opacity: 0; /* Start hidden for animation */
            transform: translateY(-10px); /* Start slightly above for slide-down effect */
            animation: textFadeIn 1s ease-out forwards;
            animation-delay: 0.5s; /* Delay title animation */
        }

/* Animation Keyframes for title */
        @keyframes textFadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

/* Form Group (for labels and inputs) */
        .form-group {
            margin-bottom: 20px;
            text-align: left;
            position: relative;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
            transition: color 0.3s ease;
        }

.form-group input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1em;
            box-sizing: border-box;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

.form-group input:focus {
            outline: none;
            border-color: #2575fc;
            box-shadow: 0 0 8px rgba(37, 117, 252, 0.3);
        }

/* Submit Button */
        .register-button {
            width: 100%;
            padding: 15px;
            background-color: #2575fc;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
            margin-top: 20px;
            overflow: hidden; /* For ripple effect if added later */
            position: relative;
        }

.register-button:hover {
            background-color: #1a5acb;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

.register-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

/* Already have an account link */
        .login-link {
            margin-top: 25px;
            font-size: 0.9em;
            color: #777;
        }

.login-link a {
            color: #2575fc;
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }

.login-link a:hover {
            color: #1a5acb;
            text-decoration: underline;
        }

/* Optional: Subtle background animation */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, transparent 50%),
                        radial-gradient(circle at bottom right, rgba(255,255,255,0.1) 0%, transparent 50%);
            animation: backgroundPulse 10s infinite alternate;
            z-index: -1;
        }

@keyframes backgroundPulse {
            0% { opacity: 0.5; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="register-container">
        <h2>Register Account</h2>
        <form action="#" method="POST">
            <div class="form-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username" placeholder="Enter your username" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" placeholder="Enter your email" required>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="Enter your password" required>
            </div>
            <div class="form-group">
                <label for="confirm-password">Confirm Password</label>
                <input type="password" id="confirm-password" name="confirm-password" placeholder="Confirm your password" required>
            </div>
            <button type="submit" class="register-button">Register</button>
        </form>
        <p class="login-link">Already have an account? <a href="#">Login here</a></p>
    </div>
</body>
</html>

Animated HTML Register Form

Recommended

CSS Animated Loading Screen with Dots

HTML Admin Dashboard Template

Animated Venn Diagram

HTML

CSS

JS

Recommended

CSS Animated Loading Screen with Dots

HTML Admin Dashboard Template

Animated Venn Diagram

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS