Icon Float Away Hover Effect
The heart fills on hover while copies of it float up and away, drifting left and right as they fade, like likes on a live stream. Two ghost SVGs share one keyframe and one --drift property.
Also known as: hvr-icon-float-away, floating hearts hover css, hearts rising button.
HTML
<button class="hfx-icon-float-away">
<span class="hfx-icon-float-away-icon" aria-hidden="true">
<svg class="hfx-icon-float-away-ghost" viewBox="0 0 24 24"><path d="M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.6 4.5 7.1 4.5c2 0 3.6 1.1 4.9 2.8 1.3-1.7 2.9-2.8 4.9-2.8 3.5 0 5.7 3.5 4.4 6.8-1.8 4.6-9.3 9.2-9.3 9.2z"/></svg>
<svg class="hfx-icon-float-away-ghost" viewBox="0 0 24 24"><path d="M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.6 4.5 7.1 4.5c2 0 3.6 1.1 4.9 2.8 1.3-1.7 2.9-2.8 4.9-2.8 3.5 0 5.7 3.5 4.4 6.8-1.8 4.6-9.3 9.2-9.3 9.2z"/></svg>
<svg class="hfx-icon-float-away-heart" viewBox="0 0 24 24"><path d="M12 20.5s-7.5-4.6-9.3-9.2C1.4 8 3.6 4.5 7.1 4.5c2 0 3.6 1.1 4.9 2.8 1.3-1.7 2.9-2.8 4.9-2.8 3.5 0 5.7 3.5 4.4 6.8-1.8 4.6-9.3 9.2-9.3 9.2z"/></svg>
</span>
Like
</button>CSS
.hfx-icon-float-away {
--c: var(--hfx-color, #3b82f6);
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.7em 1.6em;
border-radius: 0.5em;
font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
cursor: pointer;
border: 0;
border-radius: 2em;
background: color-mix(in srgb, var(--c) 12%, transparent);
color: var(--c);
transition: background-color 0.25s ease;}
.hfx-icon-float-away-icon {
display: grid;
width: 1.2em;
height: 1.2em;
}
.hfx-icon-float-away-icon svg {
grid-area: 1 / 1;
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linejoin: round;
}
.hfx-icon-float-away-heart {
transition: fill 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-icon-float-away-icon .hfx-icon-float-away-ghost {
--drift: 1;
fill: currentColor;
opacity: 0;
}
.hfx-icon-float-away-ghost:nth-child(2) {
--drift: -1;
}
.hfx-icon-float-away:is(:hover, :focus-visible) {
background: color-mix(in srgb, var(--c) 20%, transparent);
}
.hfx-icon-float-away:is(:hover, :focus-visible) .hfx-icon-float-away-heart {
fill: currentColor;
transform: scale(1.12);
}
.hfx-icon-float-away:is(:hover, :focus-visible) .hfx-icon-float-away-ghost {
animation: hfx-icon-float-away-rise 1.2s ease-out infinite;
}
.hfx-icon-float-away:is(:hover, :focus-visible) .hfx-icon-float-away-ghost:nth-child(2) {
animation-delay: 0.6s;
}
/* the ghosts sit behind the main heart and surface above it, so they never blur its outline */
@keyframes hfx-icon-float-away-rise {
0% { opacity: 0; transform: translate(0, -0.2em) scale(0.45); }
25% { opacity: 0.9; transform: translate(calc(var(--drift) * 0.15em), -1.05em) scale(0.7); }
100% { opacity: 0; transform: translate(calc(var(--drift) * 0.6em), -2.5em) scale(0.55); }
}
@media (prefers-reduced-motion: reduce) {
.hfx-icon-float-away, .hfx-icon-float-away *, .hfx-icon-float-away::before, .hfx-icon-float-away::after, .hfx-icon-float-away *::before, .hfx-icon-float-away *::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.