Formulario de inicio de sesión HTML avanzado

1656 lebdev

Abrir en el editor Video Publica tu código

Formulario de inicio de sesión HTML avanzado

Recomendado

4 October 2025

Fragmento de animación de carga de CSS

26 September 2025

Fragmento de código de animación de goteo de dopamina CSS

21 July 2025

Cuadro de registro de inicio de sesión 3D Diseño HTML CSS

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>

Recomendado

Fragmento de animación de carga de CSS

Fragmento de código de animación de goteo de dopamina CSS

Cuadro de registro de inicio de sesión 3D Diseño HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS