Elastic Fill Button
An inner pill springs open inside the outline and wobbles like jelly before it settles. Width and height run on separate linear() spring curves, slightly out of phase.
Also known as: jelly fill button, bouncy fill hover, spring fill button.
HTML
<button class="hfx-elastic-fill">Let's play</button>
CSS
.hfx-elastic-fill {
--c: var(--hfx-color, #3b82f6);
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.75em;
border-radius: 0.5em;
font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
white-space: nowrap;
cursor: pointer;
border: 2px solid var(--c);
background: transparent;
color: var(--c);
transition: color 0.2s ease;
}
/* width and height spring on separate curves, out of phase, which reads as jelly */
.hfx-elastic-fill::before {
content: "";
position: absolute;
inset: 0.24em;
z-index: -1;
border-radius: 0.28em;
background: var(--c);
scale: 1 0;
transform: scaleX(0.2);
transition: scale 0.25s cubic-bezier(0.5, 0, 0.75, 0), transform 0.25s cubic-bezier(0.5, 0, 0.75, 0);
}
.hfx-elastic-fill:is(:hover, :focus-visible) {
color: #fff;
transition-delay: 0.1s;
}
.hfx-elastic-fill:is(:hover, :focus-visible)::before {
scale: 1 1;
transform: scaleX(1);
transition:
scale 0.7s linear(0, 0.5 12%, 0.78 24%, 0.86 36%, 1.07 58%, 0.97 80%, 1.01 90%, 1),
transform 0.7s linear(0, 0.6 12%, 0.92 24%, 1.04 38%, 0.97 60%, 1.015 80%, 1);
}
@media (prefers-reduced-motion: reduce) {
.hfx-elastic-fill, .hfx-elastic-fill *, .hfx-elastic-fill::before, .hfx-elastic-fill::after, .hfx-elastic-fill *::before, .hfx-elastic-fill *::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.