Plantilla de formulario de inicio de sesión HTML CSS

Abrir en el editor Publica tu código

Recomendado

18 June 2025

Animación de línea de frecuencia cardíaca

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>

Plantilla de formulario de inicio de sesión HTML CSS

Recomendado

Libro de brujas

Página de inicio de sesión 3D

Animación de línea de frecuencia cardíaca

HTML

CSS

JS

Recomendado

Libro de brujas

Página de inicio de sesión 3D

Animación de línea de frecuencia cardíaca

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS