Formulário de cadastro HTML animado com estilização CSS

34 codex

Abrir no Editor Publique Seu Código

Formulário de cadastro HTML animado com estilização CSS

Recomendado

22 August 2025

Animação de notificação de blob CSS

29 August 2025

Gerenciador de Tarefas HTML: Adicionar, Excluir e Concluir Tarefas

3 October 2025

Efeito de transformação de forma do sistema de partículas Three.js

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>

Recomendado

Animação de notificação de blob CSS

Gerenciador de Tarefas HTML: Adicionar, Excluir e Concluir Tarefas

Efeito de transformação de forma do sistema de partículas Three.js

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS