Formulaire d'inscription HTML animé avec style CSS

586 codex

Ouvrir dans l'éditeur Publiez votre code

Formulaire d'inscription HTML animé avec style CSS

Recommandé

25 July 2025

Boîte d'inscription de connexion 3D HTML CSS

15 November 2025

Clonage HTML/CSS de Spotify : interface utilisateur du lecteur de musique

23 July 2024

Connexion et inscription animées

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>

Recommandé

Boîte d'inscription de connexion 3D HTML CSS

Clonage HTML/CSS de Spotify : interface utilisateur du lecteur de musique

Connexion et inscription animées

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS