This login form includes a password visibility toggle to improve usability and reduce input errors.
HTML
<form class="login-toggle">
<div class="password">
<input type="password" placeholder="Password">
<span>👁</span>
</div>
<button>Login</button>
</form>CSS
.login-toggle{
max-width:260px;
margin:auto;
padding:16px;
border-radius:14px;
background:var(--card);
border:1px solid var(--border);
font-size:13px;
color:var(--text);
}
.password{
position:relative;
margin-bottom:12px;
}
.password input{
width:100%;
padding:10px 36px 10px 12px;
border-radius:10px;
border:1px solid var(--border);
background:transparent;
color:var(--text);
font-size:13px;
outline:none;
}
.password span{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
font-size:14px;
cursor:pointer;
color:var(--muted);
user-select:none;
}
.login-toggle button{
width:100%;
padding:10px;
border:none;
border-radius:999px;
background:var(--primary);
color:#fff;
font-size:13px;
font-weight:600;
cursor:pointer;
transition:background .2s ease, transform .15s ease;
}
.login-toggle button:hover{
background:var(--primary-hover);
transform:translateY(-1px);
}
:root{
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--border:#e5e7eb;
--primary:#2563eb;
--primary-hover:#1d4ed8;
}
@media (prefers-color-scheme: dark){
:root{
--card:#020617;
--text:#e5e7eb;
--muted:#94a3b8;
--border:#1f2937;
--primary:#3b82f6;
--primary-hover:#60a5fa;
}
}Notes
- Improves usability
- Common SaaS pattern
- JS-ready toggle
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.