Formulario de inicio de sesión HTML avanzado

2,380 lebdev

Abrir en el editor Publica tu código

Formulario de inicio de sesión HTML avanzado

Recomendado

11 October 2025

Animación de carga CSS: Cargador circular

8 February 2025

Botón de escape

10 February 2025

Información de la tarjeta

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <style>
        :root {
            --primary-color: #4361ee;
            --primary-hover: #3a56d4;
            --error-color: #ef476f;
            --text-color: #2b2d42;
            --text-light: #8d99ae;
            --bg-color: #f8f9fa;
            --card-bg: #ffffff;
            --border-radius: 8px;
            --box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        }

body {
            background-color: var(--bg-color);
            background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

.login-container {
            background-color: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            width: 100%;
            max-width: 420px;
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

.login-container::before {
            content: "";
            position: absolute;
            top: -50px;
            left: -50px;
            width: 150px;
            height: 150px;
            background-color: rgba(67, 97, 238, 0.1);
            border-radius: 50%;
            z-index: 0;
        }

.login-container::after {
            content: "";
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 120px;
            height: 120px;
            background-color: rgba(67, 97, 238, 0.05);
            border-radius: 50%;
            z-index: 0;
        }

.login-header {
            text-align: center;
            margin-bottom: 35px;
            position: relative;
            z-index: 1;
        }

.login-header h1 {
            color: var(--text-color);
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 12px;
        }

.login-header p {
            color: var(--text-light);
            font-size: 15px;
        }

.form-group {
            margin-bottom: 24px;
            position: relative;
            z-index: 1;
        }

.form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-color);
            font-size: 15px;
        }

.input-group {
            position: relative;
        }

.input-icon {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-light);
            font-size: 18px;
        }

.form-group input {
            width: 100%;
            padding: 14px 15px 14px 40px;
            border: 1px solid #e1e5ee;
            border-radius: var(--border-radius);
            font-size: 15px;
            transition: var(--transition);
            background-color: #f9fafc;
        }

.form-group input:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
            background-color: white;
        }

.form-group input.error {
            border-color: var(--error-color);
            background-color: #fff8f8;
        }

.error-message {
            color: var(--error-color);
            font-size: 13px;
            margin-top: 6px;
            display: none;
        }

.remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            position: relative;
            z-index: 1;
        }

.remember-me {
            display: flex;
            align-items: center;
        }

.remember-me input {
            margin-right: 8px;
            accent-color: var(--primary-color);
        }

.remember-me label {
            color: var(--text-light);
            font-size: 14px;
        }

.forgot-password {
            color: var(--primary-color);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: var(--transition);
        }

.forgot-password:hover {
            color: var(--primary-hover);
            text-decoration: underline;
        }

.login-button {
            width: 100%;
            padding: 14px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

.login-button:hover {
            background-color: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
        }

.login-button:active {
            transform: translateY(0);
        }

.signup-link {
            text-align: center;
            margin-top: 25px;
            font-size: 14px;
            color: var(--text-light);
            position: relative;
            z-index: 1;
        }

.signup-link a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
            transition: var(--transition);
        }

.signup-link a:hover {
            color: var(--primary-hover);
            text-decoration: underline;
        }

.social-login {
            margin-top: 30px;
            position: relative;
            z-index: 1;
        }

.social-login-text {
            text-align: center;
            position: relative;
            margin-bottom: 20px;
        }

.social-login-text span {
            background-color: white;
            padding: 0 15px;
            color: var(--text-light);
            font-size: 14px;
            position: relative;
            z-index: 2;
        }

.social-login-text::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background-color: #e1e5ee;
            z-index: 1;
        }

.social-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

.social-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #f9fafc;
            border: 1px solid #e1e5ee;
            cursor: pointer;
            transition: var(--transition);
        }

.social-button:hover {
            background-color: white;
            transform: translateY(-3px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

/* Responsive adjustments */
        @media (max-width: 480px) {
            .login-container {
                padding: 30px 20px;
                max-width: 100%;
            }
            
            .social-buttons {
                gap: 10px;
            }
            
            .social-button {
                width: 45px;
                height: 45px;
            }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <h1>Welcome Back</h1>
            <p>Enter your credentials to access your account</p>
        </div>
        <form id="login-form">
            <div class="form-group">
                <label for="email">Email Address</label>
                <div class="input-group">
                    <span class="input-icon"></span>
                    <input type="email" id="email" name="email" placeholder="name@example.com" required>
                </div>
                <div class="error-message" id="email-error">Please enter a valid email address</div>
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <div class="input-group">
                    <span class="input-icon"></span>
                    <input type="password" id="password" name="password" placeholder="Enter your password" required>
                </div>
                <div class="error-message" id="password-error">Password must be at least 6 characters</div>
            </div>
            <div class="remember-forgot">
                <div class="remember-me">
                    <input type="checkbox" id="remember" name="remember">
                    <label for="remember">Remember me</label>
                </div>
                <a href="#" class="forgot-password">Forgot Password?</a>
            </div>
            <button type="submit" class="login-button">Sign In</button>
            <div class="signup-link">
                Don't have an account? <a href="#">Create account</a>
            </div>
            <div class="social-login">
                <div class="social-login-text">
                    <span>Or continue with</span>
                </div>
                <div class="social-buttons">
                    <div class="social-button">G</div>
                    <div class="social-button">f</div>
                    <div class="social-button">in</div>
                </div>
            </div>
        </form>
    </div>

CSS