24 CSS Login Form Designs with Live Demos
Step-by-Step
Multi-step login form. Enter email, then password — the card slides between steps with a progress bar, driven entirely by `:has()` and `:checked`. No JavaScript.
Step-by-Step the 14th of 24 designs in the 24 CSS Login Form Designs with Live Demos collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<form class="lf-step" aria-label="Two-step sign in">
<input type="radio" id="lf-step-1" name="lf-step" class="lf-step-radio" checked />
<input type="radio" id="lf-step-2" name="lf-step" class="lf-step-radio" />
<header class="lf-step-head">
<span class="lf-step-bar" aria-hidden="true"></span>
<span class="lf-step-counter"><span class="lf-step-now">1</span> of 2</span>
</header>
<div class="lf-step-track">
<fieldset class="lf-step-pane">
<legend class="lf-step-label">What's your email?</legend>
<label class="lf-step-row">
<input
type="email"
name="email"
autocomplete="email"
placeholder="[email protected]"
required
/>
</label>
<label for="lf-step-2" class="lf-step-btn primary">Next →</label>
</fieldset>
<fieldset class="lf-step-pane">
<legend class="lf-step-label">Now your password</legend>
<label class="lf-step-row">
<input
type="password"
name="password"
autocomplete="current-password"
placeholder="••••••••"
required
/>
</label>
<div class="lf-step-actions">
<label for="lf-step-1" class="lf-step-btn ghost">← Back</label>
<button type="submit" class="lf-step-btn primary">Sign in</button>
</div>
</fieldset>
</div>
</form> .lf-step {
width: 100%;
max-width: 320px;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 14px;
padding: 22px 22px;
display: grid;
gap: 14px;
overflow: hidden;
}
.lf-step-radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.lf-step-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
font-size: 11px;
color: #b8b6d4;
}
.lf-step-bar {
height: 3px;
border-radius: 99px;
background: rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
}
.lf-step-bar::after {
content: "";
position: absolute;
inset: 0;
right: 50%;
background: linear-gradient(90deg, #7c6cff, #ff6c8a);
border-radius: inherit;
transition: right 0.4s ease;
}
.lf-step:has(#lf-step-2:checked) .lf-step-bar::after {
right: 0;
}
.lf-step:has(#lf-step-2:checked) .lf-step-now::after {
content: "2";
}
.lf-step-now {
font-weight: 700;
color: #f0eeff;
}
.lf-step-now::after {
content: "1";
}
.lf-step-now {
font-size: 0;
}
.lf-step-now::after {
font-size: 11px;
}
.lf-step-track {
display: grid;
grid-template-columns: 100% 100%;
width: 100%;
transition: transform 0.4s cubic-bezier(0.6, 0, 0.2, 1);
}
.lf-step:has(#lf-step-2:checked) .lf-step-track {
transform: translateX(-100%);
}
.lf-step-pane {
border: 0;
padding: 0;
margin: 0;
display: grid;
gap: 12px;
min-width: 0;
}
.lf-step-label {
font-size: 13px;
font-weight: 600;
color: #f0eeff;
padding: 0;
}
.lf-step-row input {
width: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 10px 12px;
font-size: 13px;
color: #f0eeff;
outline: none;
transition: border-color 0.15s;
}
.lf-step-row input:focus {
border-color: #7c6cff;
}
.lf-step-actions {
display: grid;
grid-template-columns: auto 1fr;
gap: 8px;
}
.lf-step-btn {
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
text-align: center;
border: 1px solid transparent;
transition:
transform 0.12s,
background 0.15s;
}
.lf-step-btn.primary {
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
color: white;
}
.lf-step-btn.primary:hover {
transform: translateY(-1px);
}
.lf-step-btn.ghost {
background: transparent;
color: #b8b6d4;
border-color: rgba(255, 255, 255, 0.1);
}
.lf-step-btn.ghost:hover {
color: #f0eeff;
background: rgba(255, 255, 255, 0.04);
} More from 24 CSS Login Form Designs with Live Demos
OTP VerifyAurora GlowNeon SynthwaveLiquid SlideCard Flip ResetMagic LinkTerminal PromptFloating PillGradient BorderSide PanelSocial FirstAnimated Mascot
View the full collection →