Favorite Star Button
A round star button that spins three fifths of a turn as it fills gold, overshoots, and flicks five sparks out between its points. Because a star repeats every 72 degrees, it lands looking upright.
Also known as: favorite button animation css, star button css, add to favorites button.
HTML
<label class="btn-star-favorite">
<input class="btn-star-favorite-input" type="checkbox" aria-label="Add to favorites">
<span class="btn-star-favorite-face" aria-hidden="true">
<span class="btn-star-favorite-sparks"><i style="--a:36deg"></i><i style="--a:108deg"></i><i style="--a:180deg"></i><i style="--a:252deg"></i><i style="--a:324deg"></i></span>
<svg viewBox="0 0 24 24"><path d="M12 3.2l2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L12 17l-5.4 2.9 1.1-6.1-4.5-4.2 6.1-.8z"/></svg>
</span>
</label>CSS
.btn-star-favorite {
--c: var(--btn-color, #3b82f6);
position: relative;
display: inline-grid;
place-items: center;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
--star: #f59e0b;}
.btn-star-favorite-input {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
border-radius: 50%;
}
.btn-star-favorite-face {
position: relative;
display: grid;
place-items: center;
width: 3.2em;
height: 3.2em;
border-radius: 50%;
background-color: color-mix(in srgb, var(--c) 10%, transparent);
color: var(--c);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent);
transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.btn-star-favorite-face svg {
width: 1.55em;
height: 1.55em;
fill: transparent;
stroke: currentColor;
stroke-width: 1.8;
stroke-linejoin: round;
transition: fill 0.2s ease, stroke 0.2s ease;
}
.btn-star-favorite-sparks {
position: absolute;
inset: 0;
}
.btn-star-favorite-sparks i {
position: absolute;
top: 50%;
left: 50%;
width: 0.14em;
height: 0.5em;
margin: -0.25em 0 0 -0.07em;
border-radius: 0.1em;
background: var(--star);
opacity: 0;
}
.btn-star-favorite:active .btn-star-favorite-face { transform: scale(0.9); }
.btn-star-favorite-input:focus-visible ~ .btn-star-favorite-face {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
.btn-star-favorite-input:checked ~ .btn-star-favorite-face {
background-color: color-mix(in srgb, var(--star) 16%, transparent);
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--star) 55%, transparent);
}
.btn-star-favorite-input:checked ~ .btn-star-favorite-face svg {
fill: var(--star);
stroke: var(--star);
animation: btn-star-favorite-spin 0.7s cubic-bezier(0.3, 0.7, 0.4, 1.3);
}
.btn-star-favorite-input:checked ~ .btn-star-favorite-face .btn-star-favorite-sparks i {
animation: btn-star-favorite-spark 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.3s;
}
@keyframes btn-star-favorite-spin {
0% { transform: rotate(0deg) scale(0.4); }
70% { transform: rotate(230deg) scale(1.25); }
100% { transform: rotate(216deg) scale(1); }
}
@keyframes btn-star-favorite-spark {
0% { opacity: 1; transform: rotate(var(--a)) translateY(-1.1em) scaleY(1); }
100% { opacity: 1; transform: rotate(var(--a)) translateY(-2.1em) scaleY(0); }
}
@media (prefers-reduced-motion: reduce) {
.btn-star-favorite, .btn-star-favorite *, .btn-star-favorite::before, .btn-star-favorite::after, .btn-star-favorite *::before, .btn-star-favorite *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - 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.