This animated login UI template uses subtle motion to improve user engagement and feedback.
HTML
<form class="login animated">
<input placeholder="Email">
<input placeholder="Password">
<button>Login</button>
</form>CSS
.login.animated{
max-width:280px;
margin:auto;
padding:24px;
border-radius:14px;
background:var(--login-bg);
color:var(--login-text);
border:1px solid var(--login-border);
animation:fadeInUp .5s ease-out both;
}
.login.animated input{
width:100%;
margin:8px 0;
padding:10px 12px;
border-radius:8px;
font-size:13px;
background:var(--input-bg);
color:var(--login-text);
border:1px solid var(--input-border);
}
.login.animated input::placeholder{
color:var(--input-placeholder);
}
.login.animated button{
width:100%;
margin-top:10px;
padding:10px;
border:none;
border-radius:8px;
background:var(--btn-bg);
color:#ffffff;
font-size:13px;
cursor:pointer;
transition:transform .15s ease, background .2s ease;
}
.login.animated button:hover{
background:var(--btn-hover);
transform:translateY(-1px);
}
@keyframes fadeInUp{
from{
opacity:0;
transform:translateY(16px);
}
to{
opacity:1;
transform:translateY(0);
}
}
:root{
--login-bg:#ffffff;
--login-text:#0f172a;
--login-border:#e5e7eb;
--input-bg:#ffffff;
--input-border:#cbd5e1;
--input-placeholder:#64748b;
--btn-bg:#2563eb;
--btn-hover:#1d4ed8;
}
@media (prefers-color-scheme: dark){
:root{
--login-bg:#020617;
--login-text:#e5e7eb;
--login-border:#1f2937;
--input-bg:#020617;
--input-border:#1f2937;
--input-placeholder:#94a3b8;
--btn-bg:#3b82f6;
--btn-hover:#60a5fa;
}
}Notes
- Smooth entrance animation
- Modern UX
- Lightweight motion
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.