Star Icon Sparkle Hover
A favorite star that fills and turns one point with overshoot while three small sparkles twinkle around it in turn. Each sparkle is a span cut into a four-point star with clip-path.
Also known as: favorite star animation css, rating star hover, sparkle icon hover.
HTML
<button class="hfx-star-icon-sparkle" aria-label="Add to favorites"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2.8l2.8 5.7 6.3.9-4.55 4.45 1.07 6.25L12 17.1l-5.62 2.95 1.07-6.25L2.9 9.4l6.3-.9Z"/></svg> <span class="hfx-star-icon-sparkle-spark"></span> <span class="hfx-star-icon-sparkle-spark"></span> <span class="hfx-star-icon-sparkle-spark"></span> </button>
CSS
.hfx-star-icon-sparkle {
--c: var(--hfx-color, #3b82f6);
font-size: var(--hfx-size, 16px);
position: relative;
display: grid;
place-items: center;
width: 3.5em;
height: 3.5em;
padding: 0;
border: 0;
border-radius: 50%;
cursor: pointer;
background: color-mix(in srgb, var(--c) 12%, transparent);
color: var(--c);
transition: background-color 0.25s ease;}
.hfx-star-icon-sparkle svg {
width: 1.6em;
height: 1.6em;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-star-icon-sparkle svg path {
fill: transparent;
transition: fill 0.2s ease;
}
.hfx-star-icon-sparkle-spark {
position: absolute;
width: 0.95em;
height: 0.95em;
background: var(--c);
clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
transform: scale(0);
pointer-events: none;
}
.hfx-star-icon-sparkle-spark:nth-of-type(1) { top: -0.35em; right: -0.3em; }
.hfx-star-icon-sparkle-spark:nth-of-type(2) { bottom: -0.1em; left: -0.45em; width: 0.7em; height: 0.7em; }
.hfx-star-icon-sparkle-spark:nth-of-type(3) { top: -0.25em; left: -0.05em; width: 0.55em; height: 0.55em; }
.hfx-star-icon-sparkle:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-star-icon-sparkle:is(:hover, :focus-visible) svg { transform: rotate(72deg) scale(1.08); }
.hfx-star-icon-sparkle:is(:hover, :focus-visible) svg path { fill: currentColor; }
.hfx-star-icon-sparkle:is(:hover, :focus-visible) .hfx-star-icon-sparkle-spark {
animation: hfx-star-icon-sparkle-twinkle 1.2s ease-in-out infinite;
}
.hfx-star-icon-sparkle:is(:hover, :focus-visible) .hfx-star-icon-sparkle-spark:nth-of-type(2) { animation-delay: 0.4s; }
.hfx-star-icon-sparkle:is(:hover, :focus-visible) .hfx-star-icon-sparkle-spark:nth-of-type(3) { animation-delay: 0.8s; }
@keyframes hfx-star-icon-sparkle-twinkle {
0%, 100% { transform: scale(0) rotate(0deg); }
50% { transform: scale(1) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
.hfx-star-icon-sparkle, .hfx-star-icon-sparkle *, .hfx-star-icon-sparkle::before, .hfx-star-icon-sparkle::after, .hfx-star-icon-sparkle *::before, .hfx-star-icon-sparkle *::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.