A floating label login UI built with pure HTML and CSS that animates input labels above fields when users interact. It enhances form clarity and space efficiency while maintaining a clean authentication layout.
Usage
Use this component when interfaces require compact yet descriptive form inputs, such as SaaS login screens, admin panels, or mobile first authentication layouts.
Implementation
The floating effect is achieved using CSS position control and state based transitions, allowing labels to shift smoothly when inputs receive focus or contain values. Responsive styling ensures consistent behavior across devices.
HTML
<form class="login-float">
<div class="login-float__field">
<input type="email" required />
<label>Email</label>
</div>
<button type="submit">Sign In</button>
</form>CSS
.login-float {
width: 200px;
padding: 1rem;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 16px 32px rgba(0,0,0,0.12);
display: grid;
gap: 0.75rem;
}
.login-float__field {
position: relative;
}
.login-float__field input {
width: 100%;
padding: 0.6rem;
border-radius: 8px;
border: 1px solid #e5e7eb;
background: transparent;
color: #111827;
font-size: 12px;
}
.login-float__field label {
position: absolute;
left: 0.6rem;
top: 50%;
font-size: 11px;
color: #6b7280;
transform: translateY(-50%);
pointer-events: none;
transition: all 150ms ease;
}
.login-float__field input:focus + label,
.login-float__field input:not(:placeholder-shown) + label {
top: -6px;
background: #ffffff;
padding: 0 0.25rem;
font-size: 10px;
color: #6366f1;
}
.login-float button {
padding: 0.5rem;
border-radius: 10px;
border: none;
background: #6366f1;
color: #ffffff;
font-size: 12px;
cursor: pointer;
}
@media (prefers-color-scheme: dark) {
.login-float {
background: #111827;
color: #e5e7eb;
}
.login-float__field input {
border-color: #374151;
color: #e5e7eb;
}
.login-float__field label {
color: #9ca3af;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses animated floating label technique
- Enhances input clarity and space optimization
- Fully responsive across breakpoints
- Suitable for SaaS and dashboard login pages
- Easy to customize label transition timing and spacing
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.