Formulario de registro HTML animado con estilo CSS

584 codex

Abrir en el editor Publica tu código

Formulario de registro HTML animado con estilo CSS

Recomendado

18 August 2024

Tienda de accesorios de Star Wars

5 June 2025

icono de carga 5

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>

Formulario de registro HTML animado con estilo CSS

Recomendado

Lazo de neón

Tienda de accesorios de Star Wars

icono de carga 5

HTML

CSS

JS

Recomendado

Lazo de neón

Tienda de accesorios de Star Wars

icono de carga 5

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS