Formulario de inicio de sesión HTML avanzado

1260 lebdev

Abrir en el editor Publica tu código

Formulario de inicio de sesión HTML avanzado

Recomendado

20 October 2023

Truco de Captura de Ratón en JS

17 May 2025

Tarjeta moderna con giro

31 March 2024

Carrusel de tarjetas JavaScript

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

Truco de Captura de Ratón en JS

Tarjeta moderna con giro

Carrusel de tarjetas JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS