Claude Haiku 5.5

I need a like button built with pure CSS and no JavaScript, with a wild animation on click. The output has to be one complete, self-contained HTML file in a single code block, with nothing run through a script tag. The button also needs to be visible right away on first paint, and I'm planning to use a hidden checkbox with a label and the `:checked` state to handle the toggle.

I'm weighing a counter that rolls between two numbers, using a visually hidden checkbox so the button stays keyboard-accessible, and styling the label's focus state.

Still working out the number roll: the count will slide between the two stacked numbers, with the old one moving up and fading as the new one comes in.

Still working on the number roll: I'm stacking two numbers so the old one slides up and fades as the new one comes in, using transitions that run both ways.

Now I'm setting up the particle positions with a rotation variable per particle, then planning the page layout around a single polished like button.

Still working through the rest of the effects: a shockwave ring, a burst of particles, and a background glow pulse.

Still writing the particle markup: I'm placing each spark with its own angle and color, then moving on to the burst keyframes.

Still working out how the particles fly outward: rotating each one by its angle and then translating it along that direction should push it out from the button's center.

Still writing the particle keyframes: each one rotates by its angle, then moves outward and fades from full opacity to zero.

Still writing the heart keyframes: the heart pops in stages, shrinking, overshooting, then settling back to normal size with a small wobble.

Still writing the button's markup: a hidden checkbox, a label holding the particle and ring effects, and an inline heart icon.

Still writing the like button's markup: the inline heart icon, then the stacked count digits that will roll when clicked.

Still writing the button's layout: the count sits in a box that hides overflow, and the label is what the checkbox toggles.

Still writing the button's gradient fill: the heart is transparent and gray when unchecked, then picks up a red-pink gradient when checked.

Adding a card-wide shake and background flash on the checked state, using `:has()` to key it off the hidden checkbox.

Next I'm setting up a social post card with an avatar, name, and text so the like button sits on something visible from the first paint. I'm also using `:has()` on the wrapper to give the card a small shake when the checkbox is checked, which I'll keep subtle.

Still writing the card's text and the hint line under it, then moving on to the background.

Still working on the count: it sits in a grid so both digits share one cell and the box takes the wider width, with overflow hidden and a springy transition on each digit.

Still writing the particle colors and shapes, mixing circles with a few sparks.

Still writing the particle burst: sixteen sparks spaced around the heart, with distances alternating between shorter and longer throws.

Still writing the particle keyframes: each spark rotates to its angle, flies outward along it while shrinking back in, then fades out at the end.

Still working out the particle motion: each spark gets rotated to its angle and pushed outward, and I'm checking whether the spin should happen before or after the translation so the particle doesn't orbit the button's center.

Still working out the particle motion: each spark gets rotated to its angle and then pushed outward, and I'm keeping the self-spin on the same transform chain so it stays in place.

Still writing the particle keyframes: each spark starts small and invisible at its angle, then pops to full opacity partway out before shrinking to nothing.

Still writing the particle keyframes: each spark flies outward along its angle while shrinking and spinning, then fades out. I'll limit the animation to the checked state so it resets when the button is unchecked.

Next I'm working through the particle timing: the keyframes apply only under the checked state, and once unchecked the animation is removed and the particles return to invisible. Re-checking restarts the burst, though rapid toggling mid-animation is what I still need to sort out.

Still writing the unlike state: I'm adding a small deflate on the heart icon for when the button gets unchecked, though I'm wary that a plain selector would also fire on first paint.

Still going through the unlike side: I'm weighing whether a small deflate on the heart would fire on first paint, so I'm leaning toward skipping it and using a plain transition on the fill and count instead.

Still writing the button's visual effects: a shockwave ring that scales out and fades, a soft glow behind the icon, and a background pulse on the label when it's checked.

Still writing the card-wide jolt and the floating "+1" text that rises from the heart when it's checked.

Adding a visually hidden "Like" label so screen readers have clear text to announce, since the visible count alone would just read as a number.

Still writing the button's styles: a pill-shaped layout with a round icon well, the count set in bold, and the hidden "Like" text kept out of the visual count.

Still writing the count's layout: a fixed-height box that hides overflow, with each digit line matched to the same height so the roll stays clean.

Still writing the card's footer: the like button sits beside a small replies count, then I'll add a caption and hint underneath the card.

Still writing the heart's pop keyframes: it shrinks, overshoots, then wobbles back to normal size.

Still writing the button's effect styles: the burst particles are centered on the icon and sized small, and a ring element will fill the icon box before scaling out.

Still writing the plus-one keyframes: the text rises from the top of the icon while fading in and out.

Still writing the particle styles: each spark is a small element colored through a custom property, with dot and star variants sharing one base class.

Still writing the particles: some will be small hearts drawn with a CSS mask, so they pick up the same color as the spark.

Still writing the heart's mask: the hearts and mixed particles pick up the spark color through the mask.

Still writing the particle list: sixteen sparks alternating between hearts, stars, and dots, each with its own angle, distance, and color.

Still writing the particle list: the remaining sparks continue with the same pattern, alternating hearts, stars, and dots at varied angles, distances, and colors.

Still writing the particle styles: sizes and margins are set so each spark centers on the icon, with hearts masked and stars clipped.

Still writing the heart's mask: the particle glow sits outside the mask, so I'm checking the data-URI syntax and the `mask` shorthand.

Still writing the reduced-motion fallback: the sparkle and plus-one elements get hidden, and the heart's pop animation is turned off.

Still writing the counter roll: the two digit lines swap on check, with the outgoing one sliding up and the incoming one sliding in from below, and the overshooting easing curve should push the new digit slightly past its resting spot.

Still writing the button's color states: the checked state gets a pink-to-lavender gradient background, a pink border, and a lighter text color, with transitions on each.

Still writing the heart's colors: the icon gets a filled pink with a matching glow when checked, and the outline fades in over a short transition.

Still writing the jolt: the post card gets a short rotate-and-scale wobble when it's checked, and I'm wondering whether the `:has` trigger would also run it on first paint.

Still writing the squish: the label gets a quick scale-down and overshoot when checked, and since the animation only runs while the state holds, it won't replay on page load.

Still writing the hover states: the button gets a pink border on hover, and the icon scales up a little, though I need to make sure the pop animation takes over while it's checked.

Still writing the page layout: the body is a centered grid with a dark radial-gradient background, and I'm adding a small "Pure CSS · no JavaScript" kicker above the card with a hint line below it.

Still writing the post card's styling: a translucent, blurred panel with a soft border and rounded corners, plus a gradient avatar with initials, and I'm considering adding a 16:10 gradient area with abstract shapes as a placeholder image.

Now I'm laying out the media block with a conic gradient and a radial overlay, then checking how the footer behaves when it wraps on narrow screens.

Checking the viewport math for the particles: at 375px the icon sits around x 36–80 and the 112px burst reaches about x 170, so nothing spills past the right edge. Vertically the particles can rise over the media block above, which is fine. As a safeguard I'll set `overflow: visible` on the post and `overflow-x: hidden` on the body.

Still checking the body's overflow setting, weighing whether `overflow-x: hidden` on body or `clip` would be safer against the particles. The particles can rise above the card without causing a problem, and at the 375px width there's no sideways spill. The vertical extent is fine since the card is short on an 800px viewport.

Still writing the HTML head and page styles: the document has a viewport meta, the title, and a body set up as a centered grid with padding and a font stack.

Still writing the body's base styles: the margins, font stack, text color, and layered background gradients are being set, with overflow-x hidden as a safeguard.

Still writing the page layout: a main wrapper holds a small kicker line, then the post article with its header, avatar, and text.

Still writing the markup: the media block holds three orbs, then the footer holds the like control, with a hidden checkbox and a label containing the icon and the rolling count.

Still writing the markup: the footer's like control and stats line are closing out, and I'm adding the hint text below the card.

Still writing the media block: the orbs are absolutely positioned circles with a blur, sitting on a diagonal gradient.

Still writing the keyframes for the heart pop and the ring pulse, which scale outward and fade as the burst plays.

Still writing the particle keyframes: each spark flies outward along its angle, fading in and then out as it travels.

Still writing the keyframes for the particle flight: each spark rotates out along its angle while sliding up and shrinking, and I'm checking whether the mismatched transform lists will interpolate cleanly.

Still writing the particle flight: each spark keeps the same transform structure across keyframes so the rotation and scale interpolate cleanly.

Still writing the heart's fill: the icon's stroke and fill colors are set, and I'm switching the fill from none to transparent so the color change can transition smoothly.

Still writing the card's styling: a padded, rounded panel with a faint gradient fill and a soft border, and I'm setting up a heavy drop shadow underneath it.

Still writing the media block: it's a relative container with a diagonal gradient background, an overflow-hidden clip, and margins, and I'm checking that the orbs stay inside it.

Still writing the post header and footer styles: the header lays out the avatar and name row, and the footer is a wrapping flex row with the like control.

Still writing the button's styles: it's an inline-flex pill with a gap between the icon and count, tight padding on the left, and a fully rounded shape.

Still writing the button's icon: the SVG sits at 24px inside a 44px circle, layered above the background.

Still writing the icon's styles: the heart path starts transparent with a muted stroke, and I'm checking that the particles stacked after the SVG will paint above it.

Still writing the checked state: the pill turns pink-tinted with a glowing shadow, and I'm setting its color and border to match.

Still writing the checked-state rules: the heart pops and its path fills with pink with a glow, and I'm noting the hover scale will sit on the base transform.

Still writing the particle styles: the ring and sparks are absolutely positioned at the center of the icon, starting invisible until the animation runs.

Still writing the particle styles: the ring, the round and shaped sparks, and the animation hooks for the checked state.

Still writing the CSS: the pulse ring and the flying sparks are animated on click, and a plus-sign pops up above the button.

Still writing the plus indicator: it sits above the icon with a glowing pink text shadow, and its keyframes rise, fade, and scale while staying centered.

Still writing the count and plus styles: the counter is a fixed-height grid that hides overflow, and the plus indicator is set to sit at the top of the icon.

Still writing the count styles: the number's two stacked copies get their transitions, and the checked state slides the old value up.

Still writing the accessibility and reduced-motion rules: the screen-reader label sits off-screen, and the animations and particles are turned off for users who prefer less motion.

Still writing the kicker and hint styles: the kicker is small uppercase pink text centered above the card, and the hint sits below in muted tone.

Still writing the orb styles: the media block's circles are positioned at the corners, with a warm radial gradient on the first one.

Still writing the orbs: the second one sits upper-right in cool cyan, the third is a small violet glow at the bottom edge, and I'm weighing a subtle floating animation on them.

Still writing the heart icon's path data, checking that the curves trace a proper heart shape from the bottom tip up through the two lobes.

Still writing the mask: the heart path gets encoded into an SVG data URI so the same shape can be reused as a CSS mask.

Still writing the particle markup: each spark gets its own angle, distance, and color, with the heart-shaped, star-shaped, and round variants mixed in.

Still writing the particle markup: the remaining sparks get their angles, distances, and colors, mixing heart, star, and round shapes.

Still writing the particle markup: the last sparks get their angles, distances, and colors, mixing heart, star, and round shapes.

Still writing the particle styles: the sparks are positioned at the icon's center with margins that offset their size, and their hearts, stars, and round shapes get the right sizes.

Still writing the keyframes: the jolt animation rotates and nudges the post a little, then settles back to rest.

Still writing the hover rules: the icon's SVG scales and tilts when the button is hovered, and I'm checking that the checked-state animation overrides that during playback. I also want a focus outline on the hidden input so keyboard users can see where they are.

Still writing the label's focus and tap behavior: I'm checking the sibling selector that shows the focus ring on the button, and confirming the label click correctly toggles the checkbox.

Still checking the `.page` width and the `min()` fallbacks, then confirming the heart SVG sits in the markup with `aria-hidden` set so screen readers skip it.

Still checking the ring and particle opacity, confirming the sparks start invisible and the pulse scales from the center.

Still writing the rest of the CSS for the post's background and layout.

Still writing the CSS for the page background and the orb gradients.

Still writing the icon's markup: the ring and the particle spans sit inside the icon, followed by the SVG and the plus indicator.

Still writing the fly keyframes: the sparks start hidden and small, then rise along their angle while spinning and growing, before fading out at the end.

Still writing the fly keyframes: the transform starts at the particle's angle with a small offset, and the particles grow to full size as they pass the midpoint of the animation.

Still writing the reduced-motion block and the hidden checkbox styles, checking that the input stays invisible but focusable.

Still writing the file: the heart's SVG markup and the particle spans go into the icon, then the rest of the post's header.

Still writing the markup: the icon gets its ring, the particle spans, and the heart SVG, followed by the plus indicator.

Still writing the markup: the count sits next to the icon with two stacked numbers, and the footer carries the stats line below.

Still writing the orb float: the floating animation goes on the three orbs in the media block, with the second and third offset by a delay so they don't move in unison.

Still writing the final file: the button's markup, styles, and the single code block to deliver.