Guides · · Maxwell Prehoda
10 Like Button Animations, From the X Heart Burst to YouTube's Themed Likes
A like button animation has a hard job: it plays thousands of times for the same person, so it must feel rewarding the first time and still be welcome the five-hundredth. The ones that last are short (well under a second), happen exactly where the finger or cursor is, and only celebrate on like, never on unlike.
Below are the like animations that shaped the pattern, from X's heart burst and Instagram's double-tap to YouTube's themed likes, Facebook's reaction picker and Medium's claps, plus the tools people use to build them. Each says what it is best for, how it works, and the trap to avoid. Most come with a live pure-CSS version from our directory you can copy.
1. X (Twitter) heart burst: Best for the classic one-tap heart for social feeds
Platform: X web and native apps
In November 2015 Twitter renamed favorites to likes and swapped the gold star for a heart. With the heart came the animation that every like button since has been compared to: the outline shrinks for a beat, a colored ring and a spray of small dots burst outward, and the heart pops back filled.
The anticipation (the shrink before the pop) is the part people forget to copy, and it is what makes the tap feel physical. The whole sequence is under a second, and unliking simply empties the heart with no burst at all.
Our Heart Like Button below is a pure-CSS take on the same pattern: the heart shrinks, a ring bursts outward, then it pops back filled with a spray of dots, with a hidden checkbox holding the liked state.
Watch out for: Burst particles that fly far outside the button get clipped by cards with overflow hidden. Keep the burst within about one button-width, or render it in a layer that can overflow.
2. Instagram double-tap to like: Best for photo and video feeds where the content is the target
Platform: Instagram iOS and Android apps
Instagram lets you like a post by tapping the heart under it or by double-tapping the image itself. The double-tap shows a large heart that pops over the photo and fades away, while the small heart below fills in red.
This is the best example of putting the reward where the attention already is. People are looking at the photo, not the toolbar, so the feedback appears on the photo. The small heart is the durable state; the big heart is the moment.
If you add double-tap to a web feed, keep a visible like button too, because double-tap is invisible until someone tells you it exists.
Watch out for: Double-tap conflicts with double-tap-to-zoom on mobile browsers. Set touch-action: manipulation on the media, and make sure a slow double-tap doesn't also open the post.
3. YouTube's themed like animations: Best for context-aware likes that match the content
Platform: YouTube iOS and Android apps
YouTube has iterated on its like button in public. In April 2022 the mobile apps added a colorful animation: the outlined thumb bounces and grows, shifts through color, and fireworks and streamers pop around it, while desktop kept the plain fill. In the October 2025 redesign, designer Andreas Storm documented 20 themed like animations, each about a second long, that match the video's category: basketball, cricket, horror, romance, cooking, music, cats, dogs and more.
There is also a contextual trick: since October 2023 the like button can glow when a creator asks viewers to like the video. Together these show a mature direction for like animations: the reward reflects what you are liking, and the button draws attention only when it is relevant.
Our Thumbs Up Like Checkbox below is a pure-CSS take on the thumbs pattern: the thumb winds back, flicks up and fills, and the count rolls from 41 to 42.
Watch out for: Some viewers found the 2022 fireworks version too long, per coverage at the time. Themed variants multiply your design and QA work; start with one great default before you build twenty.
4. Facebook Reactions: Best for letting people choose more than one feeling
Platform: Facebook web and apps
In February 2016 Facebook turned its Like button into a picker: Like, Love, Haha, Wow, Sad and Angry. Press and hold Like on mobile, or hover over it on desktop, and the reactions appear in a row above the button.
The interaction lesson is progressive disclosure. A plain tap still likes, so nobody has to learn anything new, while a longer press reveals more options. The picker appears right above the finger, and choosing one replaces the button's icon with the reaction you picked.
Our Emoji Reaction Tooltip below shows the companion pattern in pure CSS: hovering a reaction chip pops the emoji out large above the list of people who reacted.
Watch out for: Hover pickers don't exist on touch screens and long-press isn't discoverable. Make sure keyboard users can open the picker (for example with Enter or an arrow key) and that a simple click still works as a plain like.
5. Medium claps: Best for letting readers show how much they liked something
Platform: Medium web and apps
In August 2017 Medium replaced its Recommend button with claps, and readers can give a story up to 50. Each press animates the hand and bumps a counter, so the amount of motion matches the amount of appreciation.
A counter that rolls up with each tap turns a binary like into a scale. That works for content where degree matters, such as articles, tutorials and talks, and it gives writers a richer signal than a heart. Medium also weights author payments by claps, which is why the button matters so much there.
Our Clap Counter Button below is a pure-CSS version: the hand jolts, a ring of sparks flies out and the number rolls up one.
Watch out for: Repeat-tap buttons need a limit and a clear state at the limit, or people will tap until something breaks. Debounce your network calls so 50 taps don't fire 50 requests.
6. mo.js Burst: Best for custom particle bursts for heart and star buttons
Platform: JavaScript, MIT (by legomushroom)
mo.js is Oleg Solomka's motion graphics library for the web, and its Burst module is the tool people reach for when they want a like burst that matches their brand. You describe the burst declaratively (how many particles, their shape, radius, angle, colors and timing) and it handles the choreography, alongside Shape and ShapeSwirl modules for rings and swirling particles.
It sits between hand-written CSS and a full Lottie file: more control than keyframes, much less work than drawing every frame, and it is code, so the colors can change with your theme.
Watch out for: For a single heart button, a JavaScript animation library is a lot of weight. If all you need is a ring and eight dots, CSS can do it, as our Heart Like Button Hover below shows with box-shadow dots on one pseudo-element.
7. LottieFiles like animations: Best for designer-made hearts and thumbs in native apps
Platform: Lottie JSON (iOS, Android, web)
If your designers work in After Effects, a Lottie file is the usual way to ship a like animation in native apps. LottieFiles has a large library of free like animations from its community: hearts, thumbs, sparkles, bursts.
The trick for a toggle like this is to play the animation forward on like and jump to the last frame (or the first) on unlike, instead of playing the whole thing backwards.
Watch out for: Many free files loop or end on a frame that doesn't match your filled icon. Check the final frame matches your static liked state exactly, and check each file's license before shipping.
8. Our Heart Toggle Switch: Best for liking or favoriting from a settings-style row
Platform: Motions directory, free, pure CSS Ours
A like expressed as a switch: the outlined heart rides across the track, then fills with your accent in a squash and pop while eight dots burst out around the knob. The burst is one element with box-shadow dots, so it stays light.
It suits places where liking is a preference rather than a reaction, such as "favorite this team" or "save this artist", and it is a real checkbox underneath, so it works with keyboards and forms.
Watch out for: Don't mix a heart switch and heart buttons on the same screen for the same action. Pick one control per meaning.
10. Our Floating Hearts Background: Best for live streams and celebration screens
Platform: Motions directory, free, pure CSS Ours
Hearts in three shades rise from the bottom of a blush backdrop, swaying, beating and fading out near the top. Each heart is four gradients on one pseudo-element, with no clip-path or SVG.
Use it behind a live chat or a "thanks for the love" screen, where likes arrive in bulk and a single button burst can't show the volume. Spawn a few extra hearts each time a like comes in.
Watch out for: Keep it behind content and away from text, and let the reduced-motion guard stop it. A permanently moving background next to reading content is tiring.
How to choose a like button animation
Match it to what is being liked
Quick reactions in a feed want X's heart: one tap, under a second. Photos and video want Instagram's double-tap on the content. Articles and talks suit Medium-style claps, where amount matters. Communities that need nuance suit Facebook-style reactions. Votes on ideas want a rolling counter like our Upvote Button.
Match it to how often it plays
A like button plays constantly, so keep it short (300 to 700ms), keep the burst near the button, and celebrate only on like. YouTube's experience shows that a long, loud animation draws complaints. Themed or special variants work best for rarer moments.
Match it to your stack
Pure CSS handles hearts, thumbs, claps and counters with a checkbox or a class, and every demo above is copy-paste. Use mo.js when you want a custom particle choreography in code, and Lottie when designers own the animation in After Effects for native apps. See our button click animation guide for related press effects.
Make your like button worth tapping
Tap your own like button ten times in a row. If it is still pleasant on the tenth, it is right. If you are tired of it by the third, shorten the burst or drop the particles and keep only the pop.
Want one that fits your brand's icon? Describe it in the creator, or paste your button's HTML, and get production-ready CSS with a reduced-motion version.
Make a like button with a heart icon, CSS only, driven by a hidden checkbox. On like: the outline shrinks to 0.8 for 100ms, then the heart pops to 1.15 and settles at 1 filled red, 350ms with a springy ease. At the pop, a ring expands and fades, and 8 small dots fly 18px outward and fade in 500ms. On unlike: the fill drains in 150ms with no burst. With prefers-reduced-motion, swap the fill instantly with no scale or particles. Include a visually hidden label and aria-pressed state.
Common questions
How do you make a heart like animation in CSS?
Use a checkbox or a class for the liked state, scale the heart down slightly then up past 1 with a springy cubic-bezier, fill it, and add a ring and a few dots that expand and fade from behind it. Our Heart Like Button is a complete example you can copy.
When did Twitter change the star to a heart?
In November 2015 Twitter renamed favorites to likes and replaced the gold star with a heart, along with the burst animation that many like buttons now imitate.
How long should a like animation be?
Short: roughly 300 to 700ms. Like buttons are tapped constantly, so anything longer starts to feel like a delay. Put the energy into the first 200ms (the anticipation and pop) and let the burst fade quickly.
Should the unlike action be animated?
Lightly. Drain the fill quickly with no particles. Celebrating an unlike sends the wrong message, and a big reverse animation makes the toggle feel slow.
How do I make a like button accessible?
Use a real button with aria-pressed (or a labelled checkbox), give it a text label such as Like for screen readers, make sure the liked state is visible without color alone (a filled icon, not just red), and respect prefers-reduced-motion.