Heart Like Button
The Twitter style like: the heart shrinks, a colored ring bursts outward, then the heart pops back filled with a spray of dots. A hidden checkbox holds the liked state, so a second click unlikes.
Also known as: like button animation css, twitter like button animation, heart burst button.
HTML
<label class="btn-heart-like">
<input class="btn-heart-like-input" type="checkbox" aria-label="Like">
<span class="btn-heart-like-face" aria-hidden="true">
<span class="btn-heart-like-icon">
<span class="btn-heart-like-ring"></span>
<span class="btn-heart-like-dots"><i style="--a:0deg"></i><i style="--a:45deg"></i><i style="--a:90deg"></i><i style="--a:135deg"></i><i style="--a:180deg"></i><i style="--a:225deg"></i><i style="--a:270deg"></i><i style="--a:315deg"></i></span>
<svg viewBox="0 0 24 24"><path d="M12 20.4l-1.3-1.2C6 15 3 12.3 3 8.9 3 6.1 5.1 4 7.8 4c1.6 0 3.1.8 4.2 2 1.1-1.2 2.6-2 4.2-2C18.9 4 21 6.1 21 8.9c0 3.4-3 6.1-7.7 10.3z"/></svg>
</span>
<span>Like</span>
</span>
</label>CSS
.btn-heart-like {
--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;
--like: #f43f5e;}
.btn-heart-like-input {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.btn-heart-like-face {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.65em 1.35em 0.65em 1.05em;
border: 2px solid color-mix(in srgb, var(--c) 30%, transparent);
border-radius: 2em;
background-color: color-mix(in srgb, var(--c) 8%, transparent);
color: var(--c);
transition:
transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1.5),
color 0.3s ease,
border-color 0.3s ease,
background-color 0.3s ease;
}
.btn-heart-like-icon {
position: relative;
display: grid;
place-items: center;
width: 1.3em;
height: 1.3em;
}
.btn-heart-like-icon svg {
position: relative;
width: 100%;
height: 100%;
fill: transparent;
stroke: currentColor;
stroke-width: 2;
stroke-linejoin: round;
overflow: visible;
transition: fill 0.2s ease, stroke 0.2s ease;
}
.btn-heart-like-ring {
position: absolute;
inset: -0.35em;
border-radius: 50%;
opacity: 0;
}
.btn-heart-like-dots {
position: absolute;
inset: 0;
}
.btn-heart-like-dots i {
--r: 1.55em;
position: absolute;
top: 50%;
left: 50%;
width: 0.26em;
height: 0.26em;
margin: -0.13em;
border-radius: 50%;
background: var(--like);
opacity: 0;
}
.btn-heart-like-dots i:nth-child(even) {
--r: 1.25em;
background: var(--c);
}
.btn-heart-like:active .btn-heart-like-face { transform: scale(0.93); }
.btn-heart-like-input:focus-visible ~ .btn-heart-like-face {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
.btn-heart-like-input:checked ~ .btn-heart-like-face {
border-color: color-mix(in srgb, var(--like) 45%, transparent);
background-color: color-mix(in srgb, var(--like) 10%, transparent);
color: var(--like);
}
.btn-heart-like-input:checked ~ .btn-heart-like-face svg {
fill: var(--like);
stroke: var(--like);
animation: btn-heart-like-pop 0.75s cubic-bezier(0.17, 0.89, 0.32, 1.3);
}
.btn-heart-like-input:checked ~ .btn-heart-like-face .btn-heart-like-ring {
animation: btn-heart-like-ring 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.btn-heart-like-input:checked ~ .btn-heart-like-face .btn-heart-like-dots i {
animation: btn-heart-like-dots 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.22s forwards;
}
@keyframes btn-heart-like-pop {
0% { transform: scale(1); }
15%, 35% { transform: scale(0); }
70% { transform: scale(1.25); }
100% { transform: scale(1); }
}
@keyframes btn-heart-like-ring {
0% { opacity: 1; transform: scale(0.1); box-shadow: inset 0 0 0 1em color-mix(in srgb, var(--c) 50%, var(--like)); }
55% { opacity: 1; transform: scale(1); box-shadow: inset 0 0 0 0.3em var(--like); }
100% { opacity: 0; transform: scale(1.1); box-shadow: inset 0 0 0 0 var(--like); }
}
@keyframes btn-heart-like-dots {
0% { opacity: 1; transform: rotate(var(--a)) translateY(-0.75em) scale(1.3); }
100% { opacity: 1; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) scale(0); }
}
@media (prefers-reduced-motion: reduce) {
.btn-heart-like, .btn-heart-like *, .btn-heart-like::before, .btn-heart-like::after, .btn-heart-like *::before, .btn-heart-like *::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.