Underline Input Border
A minimal input with only a bottom border. On focus an accent line grows out from the center and the label takes its color. The line is a scaled span, so it animates on the compositor, no reflow.
Also known as: css border bottom animation, input border bottom animation, material input underline.
HTML
<label class="bdr-underline-input-border">
<span class="bdr-underline-input-border-label">Full name</span>
<span class="bdr-underline-input-border-field">
<input type="text" placeholder="Ada Lovelace">
<span class="bdr-underline-input-border-line"></span>
</span>
</label>CSS
.bdr-underline-input-border {
--c: var(--bdr-color, #3b82f6);
font-size: var(--bdr-size, 16px);
display: grid;
gap: 0.35em;
align-content: start;
width: 15em;
font-family: system-ui, sans-serif;
}
.bdr-underline-input-border-label {
font-size: 0.8em;
font-weight: 600;
opacity: 0.75;
transition: color 0.3s ease, opacity 0.3s ease;
}
.bdr-underline-input-border-field { position: relative; }
.bdr-underline-input-border input {
display: block;
box-sizing: border-box;
width: 100%;
padding: 0.55em 0.1em;
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
background: transparent;
color: inherit;
font: inherit;
outline: none;
transition: border-color 0.3s ease;
}
.bdr-underline-input-border input::placeholder { color: inherit; opacity: 0.4; }
.bdr-underline-input-border-field:hover input { border-bottom-color: color-mix(in srgb, var(--c) 85%, transparent); }
.bdr-underline-input-border-line {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.14em;
background: var(--c);
transform: scaleX(0);
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bdr-underline-input-border:focus-within .bdr-underline-input-border-line { transform: scaleX(1); }
.bdr-underline-input-border:focus-within .bdr-underline-input-border-label { color: var(--c); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.bdr-underline-input-border, .bdr-underline-input-border *, .bdr-underline-input-border::before, .bdr-underline-input-border::after, .bdr-underline-input-border *::before, .bdr-underline-input-border *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<label class="group grid w-60 gap-1.5 text-base">
<span class="text-sm font-semibold opacity-75 transition group-focus-within:text-blue-500 group-focus-within:opacity-100">Full name</span>
<span class="relative">
<input type="text" placeholder="Ada Lovelace" class="block w-full border-0 border-b border-blue-500/40 bg-transparent px-0.5 py-2 outline-none transition-colors placeholder:opacity-40 hover:border-blue-500/85">
<span class="pointer-events-none absolute inset-x-0 bottom-0 h-0.5 scale-x-0 bg-blue-500 transition-transform duration-500 ease-[cubic-bezier(.2,.8,.2,1)] group-focus-within:scale-x-100"></span>
</span>
</label>Customizing this snippet
- Color: set
--bdr-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--bdr-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.