24 CSS Login Form Designs with Live Demos
Floating Pill
Compact pill-shaped login form on a single line. Rotating brand avatar, inline email and password, and a circular submit arrow that pulses on hover.
Floating Pill the 7th 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-pill">
<div class="lf-pill-avatar">
<div class="lf-pill-avatar-inner"></div>
</div>
<input type="email" placeholder="Email" class="lf-pill-input" required />
<input type="password" placeholder="Password" class="lf-pill-input pw" required />
<button type="submit" class="lf-pill-btn" aria-label="Sign in">→</button>
</form> .lf-pill {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
max-width: 320px;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 100px;
padding: 6px;
box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}
.lf-pill-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
flex-shrink: 0;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
padding: 2px;
animation: lfpSpin 6s linear infinite;
}
.lf-pill-avatar-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: #15151d
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'><circle cx='19' cy='15' r='5' fill='%23f0eeff'/><path d='M8 30c1.5-5 5.5-7 11-7s9.5 2 11 7' fill='%23f0eeff'/></svg>")
center/cover;
}
@keyframes lfpSpin {
to {
transform: rotate(360deg);
}
}
.lf-pill-input {
flex: 1;
min-width: 0;
background: transparent;
border: none;
outline: none;
color: #f0eeff;
font-size: 13px;
padding: 8px 6px;
}
.lf-pill-input.pw {
max-width: 90px;
}
.lf-pill-input::placeholder {
color: #b8b6d4;
}
.lf-pill-btn {
width: 38px;
height: 38px;
flex-shrink: 0;
border: none;
border-radius: 50%;
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
color: white;
font-size: 16px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 0 0 0 rgba(124, 108, 255, 0.5);
transition:
box-shadow 0.25s,
transform 0.15s;
}
.lf-pill-btn:hover {
transform: scale(1.06);
box-shadow: 0 0 0 6px rgba(124, 108, 255, 0.18);
}
@media (prefers-reduced-motion: reduce) {
.lf-pill,
.lf-pill * {
animation: none !important;
}
}
More from 24 CSS Login Form Designs with Live Demos
ConstellationBiometric PromptShow Password ToggleOTP VerifyAurora GlowNeon SynthwaveLiquid SlideCard Flip ResetMagic LinkTerminal PromptGradient BorderSide Panel
View the full collection →