Expanding Search Bar Hover
A round search button that opens into a full search field on hover and stays open while you type. The field is always full width and clip-path reveals it, so nothing reflows.
Also known as: search box expand on hover css, animated search input, search icon to input.
HTML
<label class="hfx-search-expand"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></svg> <input type="search" placeholder="Search the docs" aria-label="Search the docs"> </label>
CSS
.hfx-search-expand {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
display: block;
width: 15em;
height: 2.8em;
border-radius: 1.4em;
background: var(--c);
color: #fff;
cursor: text;
font-family: system-ui, sans-serif;
clip-path: inset(0 6.1em round 1.4em);
transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-search-expand svg {
position: absolute;
top: 50%;
left: 50%;
width: 1.25em;
height: 1.25em;
margin: -0.625em 0 0 -0.625em;
pointer-events: none;
transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-search-expand input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0 1.2em 0 2.8em;
border: 0;
border-radius: inherit;
background: transparent;
color: inherit;
font: inherit;
outline: none;
-webkit-appearance: none;
appearance: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.hfx-search-expand input::placeholder { color: rgba(255, 255, 255, 0.75); }
.hfx-search-expand:is(:hover, :focus-within) { clip-path: inset(0 round 1.4em); }
.hfx-search-expand:is(:hover, :focus-within) svg { transform: translateX(-5.9em); }
.hfx-search-expand:is(:hover, :focus-within) input {
opacity: 1;
transition-delay: 0.2s;
}
@media (prefers-reduced-motion: reduce) {
.hfx-search-expand, .hfx-search-expand *, .hfx-search-expand::before, .hfx-search-expand::after, .hfx-search-expand *::before, .hfx-search-expand *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--hfx-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--hfx-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.