A floating label login form built with pure HTML and CSS that animates labels above input fields when users interact. It enhances form clarity and space efficient input design in modern authentication layouts.
Usage
Use this component when interfaces require compact and descriptive form inputs, such as SaaS login screens, admin panels, mobile first authentication layouts, or minimal UI designs.
Implementation
The effect is implemented using CSS position control and state based transitions, allowing labels to shift smoothly on focus or when input fields contain values. Responsive styling ensures consistent behavior across devices.
HTML
<div class="dark-login">
<form class="card" id="form">
<h2>Welcome back</h2>
<p class="subtitle">Sign in to continue</p>
<div class="field" id="emailBox">
<input type="text" id="email" required>
<label>Email address</label>
<span class="shine"></span>
<small></small>
</div>
<div class="field" id="passwordBox">
<input type="password" id="password" required>
<label>Password</label>
<span class="toggle" onclick="togglePassword()">Show</span>
<span class="shine"></span>
<small></small>
</div>
<button class="btn">Sign in</button>
</form>
</div>
<script>
const email = document.getElementById("email");
const password = document.getElementById("password");
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
email.addEventListener("input", () => {
validate(email, emailRegex, "Enter a valid email");
});
password.addEventListener("input", () => {
validate(password, /.{6,}/, "Minimum 6 characters");
});
function validate(input, regex, message) {
const box = input.parentElement;
const error = box.querySelector("small");
if (regex.test(input.value)) {
box.classList.add("success");
box.classList.remove("error");
error.innerText = "";
} else {
box.classList.add("error");
box.classList.remove("success");
error.innerText = message;
}
}
function togglePassword() {
password.type = password.type === "password" ? "text" : "password";
}
</script>CSS
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
.dark-login {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at top, #0f172a, #020617);
}
.card {
width: 360px;
padding: 35px;
border-radius: 20px;
background: linear-gradient(145deg, #0f172a, #020617);
border: 1px solid rgba(255,255,255,0.08);
box-shadow:
0 20px 40px rgba(0,0,0,0.6),
inset 0 1px 0 rgba(255,255,255,0.05);
color: #e5e7eb;
position: relative;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
top: 0;
left: -60%;
width: 200%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.08),
transparent
);
transform: rotate(25deg);
pointer-events: none;
}
h2 {
font-weight: 600;
}
.subtitle {
font-size: 13px;
color: #94a3b8;
margin-bottom: 25px;
}
.field {
position: relative;
margin-bottom: 22px;
}
.field input {
width: 100%;
padding: 14px 12px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.08);
background: linear-gradient(180deg, #020617, #0f172a);
color: #e5e7eb;
outline: none;
transition: 0.25s;
}
.field label {
position: absolute;
left: 12px;
top: 14px;
color: #64748b;
font-size: 14px;
transition: 0.2s;
}
.field input:focus + label,
.field input:valid + label {
top: -8px;
font-size: 11px;
background: #020617;
padding: 0 5px;
border-radius: 5px;
color: #6366f1;
}
.shine {
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.15),
transparent
);
transition: 0.5s;
}
.field input:focus ~ .shine {
left: 100%;
}
.field input:focus {
border-color: #6366f1;
box-shadow:
0 0 0 3px rgba(99,102,241,0.2),
0 0 15px rgba(99,102,241,0.2);
}
.field.error input {
border-color: #ef4444;
}
.field.success input {
border-color: #22c55e;
}
small {
font-size: 12px;
color: #ef4444;
margin-top: 6px;
display: block;
}
.toggle {
position: absolute;
right: 12px;
top: 14px;
font-size: 12px;
color: #6366f1;
cursor: pointer;
}
.btn {
width: 100%;
padding: 14px;
border-radius: 12px;
border: none;
background: linear-gradient(135deg, #6366f1, #4f46e5);
color: #fff;
font-weight: 500;
cursor: pointer;
transition: 0.3s;
box-shadow: 0 10px 25px rgba(99,102,241,0.3);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 15px 35px rgba(99,102,241,0.5);
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses floating label animation technique
- Enhances input readability and space optimization
- Fully responsive across breakpoints
- Suitable for login and registration forms
- Easy to customize label movement and timing
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.