Donate Button
A Sponsor button whose heart beats on its own: a quick lub-dub, then a rest, like a real pulse. The beat is one scale keyframe with two peaks, and the heart color mixes the accent with pink.
Also known as: sponsor button css, heartbeat button animation, support us button css.
HTML
<button class="btn-donate-heart" type="button"> <svg class="btn-donate-heart-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 20.5s-7.6-4.6-9.4-9.4C1.2 7.4 3.6 4 7.1 4c2.1 0 3.6 1.1 4.9 2.8C13.3 5.1 14.8 4 16.9 4c3.5 0 5.9 3.4 4.5 7.1-1.8 4.8-9.4 9.4-9.4 9.4z"/></svg> Sponsor </button>
CSS
.btn-donate-heart {
--c: var(--btn-color, #3b82f6);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.75em 1.6em;
border: 0;
border-radius: 0.6em;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
gap: 0.55em;
padding: 0.7em 1.4em 0.7em 1.15em;
border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
border-radius: 0.6em;
background: color-mix(in srgb, var(--c) 7%, transparent);
color: inherit;
transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;}
.btn-donate-heart-icon {
width: 1.2em;
height: 1.2em;
color: color-mix(in srgb, var(--c) 30%, #ec4899);
filter: drop-shadow(0 0.1em 0.25em color-mix(in srgb, var(--c) 30%, rgba(236, 72, 153, 0.5)));
animation: btn-donate-heart-beat 1.4s ease-in-out infinite;
}
.btn-donate-heart:is(:hover, :focus-visible) {
border-color: color-mix(in srgb, var(--c) 30%, #ec4899);
background: color-mix(in srgb, color-mix(in srgb, var(--c) 30%, #ec4899) 10%, transparent);
}
.btn-donate-heart:active { transform: scale(0.96); }
@keyframes btn-donate-heart-beat {
0%, 44%, 100% { transform: scale(1); }
10% { transform: scale(1.28); }
20% { transform: scale(0.96); }
30% { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
.btn-donate-heart, .btn-donate-heart *, .btn-donate-heart::before, .btn-donate-heart::after, .btn-donate-heart *::before, .btn-donate-heart *::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.