Plantilla de formulario de inicio de sesión HTML CSS

1,331 webleb

Abrir en el editor Publica tu código

Plantilla de formulario de inicio de sesión HTML CSS

Recomendado

13 July 2024

Botón de descarga animado

16 December 2025

Juego HTML: Battle Royale simple con construcción y disparos

3 April 2026

Animación 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 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