24 CSS Login Form Designs with Live Demos
Pin Pad
Numeric PIN login form. A 3×4 keypad styled like a hardware keypad with live filled-dot indicator — perfect for kiosks, secure dashboards, and short PIN auth flows.
Pin Pad the 21st 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-pin" aria-label="Numeric pin sign in">
<h2 class="lf-pin-title">Enter PIN</h2>
<div class="lf-pin-display" aria-live="polite">
<span class="lf-pin-dot"></span>
<span class="lf-pin-dot"></span>
<span class="lf-pin-dot"></span>
<span class="lf-pin-dot"></span>
</div>
<div class="lf-pin-grid" role="group" aria-label="Numeric keypad">
<button type="button" class="lf-pin-key">1</button>
<button type="button" class="lf-pin-key">2</button>
<button type="button" class="lf-pin-key">3</button>
<button type="button" class="lf-pin-key">4</button>
<button type="button" class="lf-pin-key">5</button>
<button type="button" class="lf-pin-key">6</button>
<button type="button" class="lf-pin-key">7</button>
<button type="button" class="lf-pin-key">8</button>
<button type="button" class="lf-pin-key">9</button>
<button type="button" class="lf-pin-key lf-pin-key-fn">⌫</button>
<button type="button" class="lf-pin-key">0</button>
<button type="submit" class="lf-pin-key lf-pin-key-go">→</button>
</div>
</form> .lf-pin {
width: 100%;
max-width: 240px;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 16px;
padding: 22px 20px 18px;
display: grid;
gap: 14px;
text-align: center;
}
.lf-pin-title {
margin: 0;
font-size: 14px;
font-weight: 700;
color: #f0eeff;
letter-spacing: 0.04em;
}
.lf-pin-display {
display: flex;
gap: 12px;
justify-content: center;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.lf-pin-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
transition:
background 0.2s,
transform 0.2s;
}
.lf-pin-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.lf-pin-key {
aspect-ratio: 1 / 1;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
font-size: 16px;
font-weight: 600;
color: #f0eeff;
cursor: pointer;
transition:
background 0.12s,
transform 0.08s,
border-color 0.15s;
}
.lf-pin-key:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
}
.lf-pin-key:active {
transform: scale(0.95);
background: rgba(124, 108, 255, 0.18);
}
.lf-pin-key-fn {
color: #b8b6d4;
}
.lf-pin-key-go {
background: linear-gradient(135deg, #7c6cff, #ff6c8a);
color: white;
border-color: transparent;
}
.lf-pin-key-go:hover {
transform: translateY(-1px);
} More from 24 CSS Login Form Designs with Live Demos
Liquid SlideCard Flip ResetMagic LinkTerminal PromptFloating PillGradient BorderSide PanelSocial FirstAnimated MascotCompact ModalGlass FrostedStep-by-Step
View the full collection →