CSS स्टाइलिंग के साथ एनिमेटेड HTML रजिस्टर फ़ॉर्म

585 codex

संपादक में खोलें अपना कोड प्रकाशित करें

CSS स्टाइलिंग के साथ एनिमेटेड HTML रजिस्टर फ़ॉर्म

अनुशंसित

22 August 2024

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

25 November 2025

मूवी वेबसाइट HTML टेम्पलेट | उत्तरदायी और फ़िल्टर करने योग्य

9 February 2024

लॉगिन/रजिस्टर

HTML

<!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>

अनुशंसित

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

मूवी वेबसाइट HTML टेम्पलेट | उत्तरदायी और फ़िल्टर करने योग्य

लॉगिन/रजिस्टर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS