24 CSS Login Form Designs with Live Demos
Animated Mascot
Playful login form with an animated mascot. A CSS-drawn face whose eyes follow the focused input via `:has()` — left for email, down for password — and blinks on idle.
Animated Mascot the 11th 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-mascot">
<div class="lf-mascot-face">
<div class="lf-mascot-eye l"><div class="lf-mascot-pupil"></div></div>
<div class="lf-mascot-eye r"><div class="lf-mascot-pupil"></div></div>
<div class="lf-mascot-mouth"></div>
</div>
<input type="email" placeholder="Email" required class="lf-mascot-input email" />
<input type="password" placeholder="Password" required class="lf-mascot-input pwd" />
<button type="submit" class="lf-mascot-btn">Hop in!</button>
</form> .lf-mascot {
width: 100%;
max-width: 280px;
background: #15151d;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 16px;
padding: 24px 22px 22px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.lf-mascot-face {
width: 78px;
height: 78px;
border-radius: 50%;
background: linear-gradient(135deg, #fde68a, #fbbf24);
position: relative;
margin-bottom: 8px;
box-shadow: 0 8px 24px -8px rgba(251, 191, 36, 0.6);
}
.lf-mascot-eye {
position: absolute;
top: 28px;
width: 14px;
height: 14px;
background: #15151d;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.lf-mascot-eye.l {
left: 18px;
}
.lf-mascot-eye.r {
right: 18px;
}
.lf-mascot-pupil {
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
transition: transform 0.25s ease;
animation: lfmBlink 4s ease-in-out infinite;
}
@keyframes lfmBlink {
0%,
92%,
100% {
transform: scaleY(1);
}
95% {
transform: scaleY(0.1);
}
}
.lf-mascot-mouth {
position: absolute;
bottom: 20px;
left: 50%;
width: 22px;
height: 12px;
border: 2.5px solid #15151d;
border-top: none;
border-radius: 0 0 22px 22px;
transform: translateX(-50%);
}
/* Eyes track focused input */
.lf-mascot:has(.email:focus) .lf-mascot-pupil {
transform: translate(-3px, 0);
}
.lf-mascot:has(.pwd:focus) .lf-mascot-pupil {
transform: translate(0, 3px);
}
.lf-mascot:has(.lf-mascot-btn:hover) .lf-mascot-mouth {
height: 18px;
border-radius: 0 0 28px 28px;
}
.lf-mascot-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: 10px;
padding: 10px 14px;
color: #f0eeff;
font-size: 13px;
outline: none;
transition: border-color 0.15s;
}
.lf-mascot-input:focus {
border-color: #fbbf24;
}
.lf-mascot-btn {
width: 100%;
padding: 10px;
background: linear-gradient(135deg, #fbbf24, #ef4444);
color: white;
border: none;
border-radius: 10px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
margin-top: 4px;
transition: transform 0.12s;
}
.lf-mascot-btn:hover {
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.lf-mascot,
.lf-mascot * {
animation: none !important;
}
}
More from 24 CSS Login Form Designs with Live Demos
Neon SynthwaveLiquid SlideCard Flip ResetMagic LinkTerminal PromptFloating PillGradient BorderSide PanelSocial FirstCompact ModalGlass FrostedStep-by-Step
View the full collection →