Plantilla de formulario de inicio de sesión HTML CSS

1,229 webleb

Abrir en el editor Publica tu código

Plantilla de formulario de inicio de sesión HTML CSS

Recomendado

25 February 2025

Un código de securearray494

24 November 2025

Cargador de juegos Unity WebGL con soporte publicitario

16 January 2026

Plantilla HTML para reproductor de juegos Flash Ruffle

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <style>
        /* Basic Reset & Body Styling */
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #71b7e6, #9b59b6);
            color: #333;
        }

/* Form Container Styling */
        .login-container {
            background-color: #ffffff;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            width: 100%;
            max-width: 400px;
            text-align: center;
            box-sizing: border-box; /* Include padding in width */
        }

.login-container h2 {
            margin-bottom: 30px;
            color: #333;
            font-size: 28px;
            position: relative;
            padding-bottom: 10px;
        }

.login-container h2::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: #9b59b6;
            border-radius: 5px;
        }

/* Input Group Styling */
        .input-group {
            margin-bottom: 20px;
            text-align: left;
        }

.input-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-size: 16px;
        }

.input-group input[type="text"],
        .input-group input[type="password"] {
            width: calc(100% - 20px); /* Account for padding */
            padding: 12px 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

.input-group input[type="text"]:focus,
        .input-group input[type="password"]:focus {
            border-color: #9b59b6;
            outline: none;
            box-shadow: 0 0 5px rgba(155, 89, 182, 0.3);
        }

/* Remember Me & Forgot Password */
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            font-size: 14px;
        }

.remember-forgot label {
            display: flex;
            align-items: center;
            color: #555;
            cursor: pointer;
        }

.remember-forgot input[type="checkbox"] {
            margin-right: 8px;
            accent-color: #9b59b6; /* Custom color for checkbox */
        }

.remember-forgot a {
            color: #71b7e6;
            text-decoration: none;
            transition: color 0.3s ease;
        }

.remember-forgot a:hover {
            color: #9b59b6;
        }

/* Submit Button */
        button[type="submit"] {
            width: 100%;
            padding: 15px;
            background-color: #71b7e6;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

button[type="submit"]:hover {
            background-color: #9b59b6;
            transform: translateY(-2px);
        }

button[type="submit"]:active {
            transform: translateY(0);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

/* Register Link */
        .register-link {
            margin-top: 25px;
            font-size: 15px;
            color: #555;
        }

.register-link a {
            color: #71b7e6;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s ease;
        }

.register-link a:hover {
            color: #9b59b6;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>Login</h2>
        <form action="#" method="POST">
            <div class="input-group">
                <label for="username">Username or Email</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" required>
            </div>
            <div class="remember-forgot">
                <label>
                    <input type="checkbox" name="remember-me"> Remember me
                </label>
                <a href="#">Forgot Password?</a>
            </div>
            <button type="submit">Login</button>
            <div class="register-link">
                Don't have an account? <a href="#">Register here</a>
            </div>
        </form>
    </div>
</body>
</html>

CSS