This minimal login form includes a “Remember Me” option, balancing simplicity and functionality.
HTML
<form class="login-minimal">
<label>Email</label>
<input type="email">
<label>Password</label>
<input type="password">
<label class="remember">
<input type="checkbox">
Remember me
</label>
<button type="button">Login</button>
</form>CSS
:root{
--bg:#f8fafc;
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--border:#e5e7eb;
--border-hover:#cbd5f5;
--primary:#2563eb;
--primary-dark:#1d4ed8;
}
@media (prefers-color-scheme: dark){
:root{
--bg:#020617;
--card:#020617;
--text:#e5e7eb;
--muted:#94a3b8;
--border:#1f2937;
--border-hover:#334155;
--primary:#3b82f6;
--primary-dark:#60a5fa;
}
}
.login-minimal{
max-width:260px;
margin:auto;
padding:18px;
background:var(--card);
border-radius:14px;
border:1px solid var(--border);
font-size:13px;
color:var(--text);
}
.login-minimal label{
display:flex;
align-items:center;
gap:6px;
font-size:12px;
font-weight:500;
color:var(--muted);
margin-bottom:6px;
}
.login-minimal input[type="email"],
.login-minimal input[type="password"],
.login-minimal input[type="text"]{
width:100%;
padding:11px 12px;
margin-bottom:12px;
border-radius:10px;
border:1px solid var(--border);
background:transparent;
color:var(--text);
font-size:13px;
outline:none;
transition:
border .2s ease,
box-shadow .2s ease,
transform .15s ease;
}
.login-minimal input:focus{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(37,99,235,.18);
transform:translateY(-1px);
}
.login-minimal input:hover{
border-color:var(--border-hover);
}
.remember{
display:flex;
align-items:center;
gap:8px;
margin-bottom:14px;
font-size:12px;
color:var(--muted);
}
.remember input{
width:16px;
height:16px;
accent-color:var(--primary);
cursor:pointer;
}
.login-minimal button{
width:100%;
margin-top:6px;
padding:11px 14px;
border:none;
border-radius:10px;
background:linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);
color:#ffffff;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:
transform .15s ease,
box-shadow .15s ease,
opacity .2s ease;
}
.login-minimal button:hover{
transform:translateY(-1px);
box-shadow:0 8px 18px rgba(0,0,0,.15);
}
.login-minimal button:active{
transform:translateY(0);
box-shadow:none;
}
.login-minimal button:disabled{
opacity:.6;
cursor:not-allowed;
box-shadow:none;
}Notes
- Clean and simple
- Familiar UX pattern
- Authentication-friendly
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.