gpt-oss-120b

The task: "a 'like' button in pure CSS, no JavaScript, that does a crazy animation when you click it". The user wants to generate a self-contained web demo: a single file with HTML, CSS, maybe no JS because it's pure CSS. But must be placed in a code block: fenced with HTML. The instructions for the environment: we need to output exactly one fenced code block containing the complete file, with inline CSS. No external resources unless allowed, but we can use CSS from CDN? Might need icons? Use an emoji heart or custom path. Use an <input type="checkbox"> hidden and label for click, and use CSS transitions/animations triggered by :checked state. "Crazy animation". Could be hearts exploding, scaling, rotating, confetti. We need to make an interesting visible animation.

We need to have the page show something first paint. So the like button appears and works. The user can click it; we should show the button and the animation.

But we cannot use JS. CSS only.

We could also use pure CSS keyframes triggered by :checked via sibling selectors. E.g., have an input type=checkbox hidden, and label with the UI (like a heart). When input:checked, we trigger pseudo-elements that animate e.g., burst of hearts or confetti.

The user specifically says "a 'like' button in pure CSS, no JavaScript, that does a crazy animation when you click it".

Thus we design a heart shape and when clicked, animate something like scaling (pop), and small circles radiating out, maybe swirl. Could also create a particle effect using pseudo-elements like :before, :after and maybe multiple small divs. Use a sibling container of many small shapes with animations triggered by :checked that use CSS animation-delay.

One difficulty: CSS animations can't be triggered just by changing a class on click? You can toggle the checkbox to add :checked state that triggers animations through CSS. However, after you uncheck (like if toggles), the animation will run again on subsequent checking. But we may want to trigger on each click. With the input type=checkbox, clicking toggles it: you can use input:checked + label:active? But toggle might cause flicker. If we want to repeat animation on each click, we can do input:checked for once, and then allow unchecking after animation? Could include style: input:checked ~ .animation { animation: ... } and then re-trigger the animation on each click? However if it's already checked, clicking again won't change state, so animation wouldn't run. We could use a radio pattern? Or a hidden input that resets after animation using CSS? That seems complicated.

Instead, perhaps we can use input type=checkbox and style like a button that works as a toggle: If the user clicks again (unlike), then the animation runs again? Actually toggling would cause same animation on check state and on unchecked state as well. But we can combine both: when :checked, background fill, and the animation (like confetti). On uncheck, maybe reverse animation. However, the requirement: a crazy animation when you click it. The user probably only expects to click once to like. So they might not care about subsequent toggles.

Thus we can implement a heart that rotates 360°, scales up, and bursts out confetti. Possibly just use CSS pseudo-element stars.

Make the page responsive. Provide a container centered.

Ensuring that it's visible on first paint. Use style to center the button.

We cannot use fonts from network? Actually it's local. We can use Google fonts? Possibly allowed, but not necessary. Use standard CSS.

Approach: We'll use a label with a heart shape using Unicode (♥) or using CSS shape with :before and :after forming a heart shape from two circles and a triangle. The simplest: use ♥ from HTML entity &hearts; maybe set font-size large; style with red; apply scaling and rotation.

Alternatively, we could create a heart shape using CSS for more polish fitting: Two circles and a square rotated 45 degrees.

Simplify: Use an <input type="checkbox" id="like"> hide it with display: none; then <label for="like" class="like-btn">like me</label> but styled as a heart. Using <label> to trigger element.

When input:checked + label, the label's pseudo-element(s) will animate.

We can embed "like" button similar to Facebook: a heart that fills, plus fireworks.

But we need to be creative: "crazy animation".

We could have multiple floating hearts that spin outwards.

Implementation idea:

HTML:

<div class="container">
  <input type="checkbox" id="like" />
  <label for="like" class="like-btn">
    <svg ...> heart shape... or just text characters.
  </label>
</div>

But we cannot use any external resources like an SVG file? We could embed inline SVG. Could embed a heart shape via <svg> path inside label. That could be styled with CSS fill.

But we want simple CSS only. The heart can be created via CSS pseudo-elements:

.label:before and .label:after forming two circles, and an additional square rotated 45 degrees.

Simplify: Use a .heart element that uses CSS to shape it.

Alternatively, embed an <svg> heart shape. The animation can be applied to the SVG transform.

Better to embed an inline SVG. That works fine as it's inline and thus no external assets.

In CSS we can control rotation and scale.

Plan: Insert a <svg> with viewBox "0 0 24 24", path for heart shape. Then use CSS for the label maybe.

But need to avoid JS. We'll use CSS to animate the heart and particles.

Simplify: We'll create a container <div class="like-container">. Inside: a hidden input and a <label>. The label contains an <svg> heart shape and also multiple <div class="particle"> elements for the confetti.

We can use pseudo-elements: label::before, label::after for particles, maybe plus extra <span> elements for more particles.

However, CSS can animate multiple pseudo-elements: :before and :after only. For many particles need multiple elements. Use small <span class="particle"> repeated (maybe 6) within label.

Also, to make animation appear only when checked, we can hide them initially and then animate if input:checked ~ .like-btn .particle { animation: ... }. We'll need a sibling or descendant relationship. Since the input is before the label, we can use CSS: #like:checked + .like-btn .particle { animation: burst 0.6s forwards; }

Each .particle could have a random transform: we can assign each a class to specify transform direction via animation keyframe scaling and translation.

We can set each .particle with an animation that moves from the heart outward.

Implement something like:

<div class="like-wrapper">
<input type="checkbox" id="like">
<label for="like" class="like-btn">
    <svg class="heart" viewBox="0 0 24 24">
        <path d="..."/>
    </svg>
    <span class="particle p1"></span>
    <span class="particle p2"></span>
    <span class="particle p3"></span>
    <span class="particle p4"></span>
    <span class="particle p5"></span>
    <span class="particle p6"></span>
</label>
</div>

On default, .particle are invisible (opacity:0). When #like:checked + .like-btn .particle they become visible and animate.

The heart itself also animates: scaling, rotating, maybe fill color (for liked state). The heart can be triggered with transition: transform and fill color.

Define keyframes:

@keyframes pop {
   0% { transform: scale(1) rotate(0deg); }
   30% { transform: scale(1.3) rotate(-15deg); }
   60% { transform: scale(0.9) rotate(15deg); }
   100% { transform: scale(1) rotate(0deg); }
}

Or more crazy: more rotation.

Also define keyframes for particles:

@keyframes burst1 {
   0% { transform: translate(0,0) scale(0); opacity: 1; }
   100% { transform: translate(-30px,-80px) scale(1); opacity: 0; }
}
etc.

Define each p1-p6 direction.

Alternatively, define a CSS variable for each particle's direction.

Simplify: Hard-code each particle's animation.

We should also style .like-btn to be large enough to click.

The page background maybe light.

Make it responsive.

First paint: The button will show the heart. It will be clickable. Once clicked, the animation triggers.

Make hidden input display: none (or position absolute off-screen). Use pointer-events none to avoid interfering? Use label to click.

Allow toggling: after animation, the heart remains filled (maybe red). On uncheck, you might keep it, but maybe better to keep it filled after like.

Thus default heart outline (grey). When checked, fill red, animate. For unchecking, we could ignore.

Simplify: Initially heart is outlined (stroke). Use fill: none; stroke: #555; stroke-width: 2; then when checked fill: red;.

We can use the <svg> path with fill attribute controlled via CSS: .like-btn .heart path { fill: none; stroke: #555; stroke-width:2; transition: fill 0.2s; } And upon input:checked + .like-btn .heart path { fill: #e74c3c; stroke: none; }.

But if using stroke only, the animation might be more noticeable.

Let's embed the heart path.

Find a simple heart/like SVG path: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z". Use viewBox of "0 0 24 24"

So label's inner <svg class="heart" viewBox...>.

Define .like-btn as inline-block and width and height to fix button dimension.

Now particle elements: span.particle can be small circle or heart shapes. Use border-radius:50% for circles with background color.

Set width: 8px; height:8px; background: #ffda79; maybe golden. Or use different colors for effect.

Define .particle with position: absolute; inset 0; transform: translate(0.5rem, 0.5rem) ??? We'll need container with position: relative; so they can be absolutely placed relative to label.

Thus .like-btn { position: relative; display: inline-block; cursor: pointer; } The SVG heart inside can be positioned accordingly.

Set width and height (maybe 80px). For responsiveness, set width: 80px; height: 80px; but adjust for small screens.

Now the animation:

When #like:checked + .like-btn .particle { animation: burst 0.6s forwards; }

But each particle should have a different keyframe. Or you can assign each a different animation name: burst1, burst2, ... Or using transform: translateX(Y) for each.

Simplify: Write keyframes for each p1-p6 that moves outward in specific directions (like up, down left, right, etc). Use translation values.

Example:

.particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  background: #ffd700;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
#like:checked + .like-btn .particle {
  animation: popParticle 0.6s forwards;
}
But we need each .particle to have a different translation direction; we can assign custom transform origin for each using CSS transform.

Alternative: Use keyframe with transform: translate(var(--dx), var(--dy)) scale(.5). Use CSS custom property for each .particle.

We can define CSS custom property per particle: .p1 { --dx: -30px; --dy: -50px; } .p2 { --dx: 20px; --dy: -40px; } etc.

Then define:

@keyframes popParticle {
  0% {
    transform: translate(0,0) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(1);
    opacity: 0;
  }
}

But CSS keyframes cannot use var() for transform values? Actually CSS variables can be used within transform property in keyframes. So we can define transform: translate(var(--dx), var(--dy)).

But we need combine translation with scale. However transform: translate(var(--dx), var(--dy)) scale(1). That's okay.

Therefore we can assign each particle class p1...p6 with appropriate --dx and --dy values.

But we must ensure that the keyframes reference var(--dx), var(--dy). Actually the variable gets substituted at animation time? I think yes, because keyframe definition uses computed values, but variables are inherited; but need to check. CSS supports using CSS variables inside keyframes, referencing a var that is defined on the element. At 0% and 100% we set transform: translate(0,0) scale(0) and translate(var(--dx), var(--dy)) scale(1) respectively. So each element's variables apply.

Thus we can define:

@keyframes popParticle {
  0% {
    transform: translate(0,0) scale(0);
    opacity: 0.9;
  }
  50% {
    opacity:1;
  }
  100% {
    transform: translate(var(--dx), var(--dy)) scale(1);
    opacity: 0;
  }
}

Thus we can define each .particle with property --dx, --dy.

Now we also want the heart to animate scaling and rotate and maybe bounce. Define:

#like:checked + .like-btn .heart {
   animation: heartPop 0.6s;
}
@keyframes heartPop {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.4) rotate(-10deg); }
  50% { transform: scale(0.9) rotate(10deg); }
  70% { transform: scale(1.1) rotate(-5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

We might also apply wavy effect with filter: hue-rotate.

Further we can incorporate a flash of confetti: maybe additional small rectangles.

But we keep it simple.

Now the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pure CSS Like Button</title>
<style>
  body { display:flex; justify-content:center; align-items:center; min-height:100vh; margin:0; background:#f0f0f0; font-family:sans-serif; }
  .like-wrapper { display:flex; justify-content:center; align-items:center; }
  /* hide the checkbox */
  #like { position:absolute; left:-9999px; }
  .like-btn {
    position:relative;
    width:80px;
    height:80px;
    cursor:pointer;
    display:inline-block;
    user-select:none;
  }
  .heart {
    width:100%;
    height:100%;
    fill:none;
    stroke:#555;
    stroke-width:2;
    transition: fill 0.3s ease;
    transform-origin:50% 50%;
  }
  #like:checked + .like-btn .heart {
    fill:#e74c3c;
    stroke:none;
    animation: heartPop 0.6s;
  }
  @keyframes heartPop {
    0% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.4) rotate(-10deg); }
    50% { transform: scale(0.9) rotate(10deg); }
    70% { transform: scale(1.1) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
  .particle {
    position:absolute;
    left:50%;
    top:50%;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#ffdf4d;
    transform: translate(-50%,-50%) scale(0);
    opacity:0;
  }
  #like:checked + .like-btn .particle {
    animation: popParticle 0.6s forwards;
  }
  @keyframes popParticle {
    0% {
      transform: translate(-50%,-50%) scale(0);
      opacity:0.8;
    }
    100% {
      transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1);
      opacity:0;
    }
  }
  /* define direction for each particle */
  .p1 { --dx: -30px; --dy: -60px; }
  .p2 { --dx: 30px; --dy: -55px; }
  .p3 { --dx: -35px; --dy: -20px; }
  .p4 { --dx: 35px; --dy: -25px; }
  .p5 { --dx: -25px; --dy: 30px; }
  .p6 { --dx: 25px; --dy: 30px; }
  /* to ensure animation restarts each time clicked, uncheck after animation */
  /* We cannot use JS, but we can use CSS to auto-uncheck using animation? However no. */
  /* It's okay if it's a toggle, just animation on first click */
  /* add hover effect: scaling slightly */
  .like-btn:hover .heart {
    transform: scale(1.1);
  }
</style>
</head>
<body>
<div class="like-wrapper">
  <input type="checkbox" id="like">
  <label class="like-btn" for="like">
    <svg class="heart" viewBox="0 0 24 24">
      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
    </svg>
    <span class="particle p1"></span>
    <span class="particle p2"></span>
    <span class="particle p3"></span>
    <span class="particle p4"></span>
    <span class="particle p5"></span>
    <span class="particle p6"></span>
  </label>
</div>
</body>
</html>

Make sure that the heart shape fill becomes red after click. Also the animation on .particle triggers.

Potential issues: The particle's transform uses calc with var. It's something like translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))). But combine with current transform? Actually we used transform: translate(-50%,-50%) at start. At end we want the final position offset from center with translation and center offset. A simpler approach: Use transform: translate(var(--dx), var(--dy)). However we need to start at translate(0,0). But we need to position the particle initially at the center: we set left:50%; top:50%; and transform: translate(-50%,-50%) to center the element. Then offset via var using "translate(var(--dx), var(--dy))". We can't combine because transform property overrides previous. So we need to start from two transforms: At start: transform: translate(calc(-50% + 0px), calc(-50% + 0px)) scale(0). At end: transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1). That's okay. But we need to use calc with var; the CSS grammar: calc(-50% + var(--dx)). Does that work? Yes, var can be inside calc.

But we want the variable values to be something like -30px, etc. So end result is left:50% + offset relative?

Better to use transform: translate(var(--dx), var(--dy)) scale(1) from start transform: translate(0,0) scale(0). But then particle elements are placed at absolute coordinates relative to the label's top-left, with left:50%, top:50%. So we could set top:50%; left:50%; and then transform: translate(-50%,-50%) is needed to center. Then we need to change that offset to something else. Maybe easier: set left:50%; top:50%; transform: translate(-50%,-50%) to place at center. Then we animate the translation using translateX and translateY relative to the element's transform. But CSS animations can set transform property directly with new values, not additive. So to animate outward we need to use transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) at 100% keyframe. That's correct.

Thus define keyframes:

@keyframes popParticle {
  0% {
    transform: translate(-50%,-50%) scale(0);
    opacity: 0.8;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1);
    opacity: 0;
  }
}

Thus each particle starts at center (0 offset) with scale(0) invisible, then scales up to size 1 and moves outward.

But the opacity may be 0.8 initial, then fade out.

Now need to ensure that after the animation finishes, the fill is persisted, but the particle should disappear after. For repeated clicking (if the user unchecks then checks again) the particles should animate again. After animation finishes, the particle remains with final state: transform offset, opacity 0. It's okay.

But if the checkbox stays checked, no re-trigger on subsequent clicks (since it's checked). If you click again, it toggles off - then you cannot click again because it's unchecked and no animation occurs. Could be toggling back to unchecked would also trigger maybe the same animation. Actually we can apply animation for both :checked and not :checked on label:active? We could use label:active to trigger a non-sustaining animation? However pure CSS limited.

If you check again (uncheck then check), the animation will run again because the :checked state changes. So it's okay for users to click multiple times to like/unlike repeatedly.

Potential environment: On clicking the label, the hidden checkbox toggles. The heart fill appears red. The particle animation triggers.

Maybe initial heart is just outline. Fine.

One more design: Add a "like count" maybe, but not needed.

Should ensure that no horizontal scrollbars appear: set width:80px max width: 100%? For small screens maybe shrink.

Make responsive: For screens under 400px, reduce size: .like-btn { width: 60px; height: 60px; } Use media query.

Add CSS:

@media (max-width: 400px) { .like-btn { width:50px; height:50px; } }

We'll add that.

Add a little ghost effect: maybe a small text "Liked!" after click? Not needed.

Now final code: Provide the entire HTML.

Edge Cases: With no JavaScript, sprite/animation must rely solely on CSS. Ensure any used CSS variables exist. Also be careful that the bracket lengths are correct.

Testing: Let's simulate.

Will code produce the heart and particles as we think? We'll need to load page in Chrome and click button; heart should fill red, animate pop; particles appear and move outward; after a second, they fade out.

Potential issues:

- CSS calc with var mixing percentages and px: "calc(-50% + var(--dx))" where var(--dx) is e.g., -30px. That should be okay.

But need to confirm the syntax: The left-hand side of calc cannot have negative percentages with var? Let's check: "calc(-50% + 30px)" is valid (calc(-50% + 30px)). So using var is okay.

- In animation: The transform property might consider percentages relative to the element's own size? Actually transform translate percentages refer to the element's size (not parent). Negative 50% means half the width of the element, which works to shift the particle left/up by half its width. The variable offset is in px. So final transform will be translation of -50% + offset in px. Should be fine.

- The particle's size is small, about 6px. Starting transform translate(-50%,-50%) will make center at (50%,50%). At end transform uses same -50% offset plus var offset, moving away.

- The main heart is using stroke fill. When fill: #e74c3c, need to set stroke: none to hide outline.

Better to set .heart path's stroke property separately.

Define .heart path in CSS: .heart path { fill:none; stroke:#555; stroke-width:2; transition: fill .3s, stroke .3s; } Use #like:checked + .like-btn .heart path { fill:#e74c3c; stroke:none; }

However we set fill on .heart element (the <svg class="heart">). Actually better to define path.

Thus adjust CSS: remove .heart property fill; target .heart path.

Simplify: Use .heart path style.

Thus modify code accordingly.

Full HTML with CSS accordingly.

Also hide input: use position: absolute; left: -9999px; width:0; height:0; so not visible.

Add some style for body: background color, zero margin.

Write CSS in <style> tag within <head>.

Add responsive media query.

The page should display a heart positioned central.

Testing sanity:

Let's rewrite final code with proper CSS:

...

Potential pitfalls: For animation to trigger each time the element is checked (like when you click the label each time toggles the state), the CSS may need the animation to start or restart each time. But the same animation may not restart if the element is already animated previous. Actually if you click to uncheck, the animation for :checked will no longer apply; on re-check, the animation will apply again and thus re-run. So okay.

But need to avoid content offset when unchecked - maybe we want the particle not show after unchecking.

The particle animation only runs when the checkbox is checked.

Thus after you press liked again (unlike), the particle not play; but you likely only like once.

Thus okay. Could optionally also apply animation on :not(:checked) as well to animate when unchecking (like a "pop" again). Not needed.

Now double-check CSS specifics.

Will we have any syntax errors? Let's carefully write.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pure CSS Like Button</title>
  <style>
    body {
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #f7f7f7;
      font-family: sans-serif;
    }
    .like-wrapper {
      display: inline-flex;
    }
    /* hide the actual checkbox */
    #like {
      position: absolute;
      left: -9999px;
    }
    .like-btn {
      position: relative;
      width: 80px;
      height: 80px;
      cursor: pointer;
      display: inline-block;
      user-select: none;
    }
    .like-btn:hover .heart {
      transform: scale(1.1);
    }
    .heart {
      width: 100%;
      height: 100%;
      display: block;
      transform-origin: 50% 50%;
    }
    .heart path {
      fill: none;
      stroke: #555;
      stroke-width: 2;
      transition: fill .3s ease, stroke .3s ease;
    }
    #like:checked + .like-btn .heart path {
      fill: #e74c3c;
      stroke: none;
      animation: heartPop 0.6s;
    }

    @keyframes heartPop {
      0%   { transform: scale(1) rotate(0deg); }
      30%  { transform: scale(1.4) rotate(-12deg); }
      50%  { transform: scale(0.9) rotate(10deg); }
      70%  { transform: scale(1.2) rotate(-6deg); }
      100% { transform: scale(1) rotate(0deg); }
    }

    .particle {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ffdd57;
      opacity: 0;
    }
    #like:checked + .like-btn .particle {
      animation: popParticle 0.6s forwards;
    }

    @keyframes popParticle {
      0% {
        transform: translate(-50%,-50%) scale(0);
        opacity: 0.8;
      }
      100% {
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1);
        opacity: 0;
      }
    }
    /* individual particle directions */
    .p1 { --dx: -30px; --dy: -70px; }
    .p2 { --dx: 30px;  --dy: -60px; }
    .p3 { --dx: -35px; --dy: -20px; }
    .p4 { --dx: 35px;  --dy: -25px; }
    .p5 { --dx: -25px; --dy: 30px; }
    .p6 { --dx: 25px;  --dy: 35px; }

    @media (max-width: 400px) {
      .like-btn {
        width: 60px;
        height: 60px;
      }
      .particle {
        width: 4px;
        height: 4px;
      }
    }
  </style>
</head>
<body>
  <div class="like-wrapper">
    <input type="checkbox" id="like">
    <label class="like-btn" for="like">
      <svg class="heart" viewBox="0 0 24 24">
        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path>
      </svg>
      <span class="particle p1"></span>
      <span class="particle p2"></span>
      <span class="particle p3"></span>
      <span class="particle p4"></span>
      <span class="particle p5"></span>
      <span class="particle p6"></span>
    </label>
  </div>
</body>
</html>

Now test manually: The heart is inside label. On page load, hidden input unchecked, heart outlined, no particles.

On click of label (like button), the input becomes checked, CSS triggers fill red and heartPop animation, and particles animate. After animation ends, particles become invisible, but still transform remains at final position. No new animation on subsequent clicks unless we toggle.

If we click again (unchecking), the input becomes unchecked. The heart fill goes back to none? Actually the CSS rule for .heart path fill only when checked; so after uncheck, fill reverts to none, stroke returns (via default). That's okay. No animation on unchecked.

Users may want to keep liked after click. The current code toggles state. Could we keep checked after click and prevent toggling off? You could use input type=checkbox and disable pointer events after checking? Not needed.

But we could use input type=radio inside a group so clicking again will not toggle off? Actually radio cannot be toggled off by clicking again; once selected, you can't unselect unless you have separate hidden input. However, you might then not be able to click again to produce animation again.

But requirement probably just demonstration.

Now evaluate if there's any horizontal scroll. The container is centered, width limited to 80px max. On viewports less than 400px, width reduces to 60px. No overflow.

Add a fallback for small width: property concerning display.

The code should run without errors.

Potential issues: The .heart element uses transform and maybe conflict with .like-btn:hover .heart scaling. Since .heart path has transform used only in keyframes, but .like-btn:hover .heart is set to scale. But .heart is an <svg> container; it is not the path. So .heart has transform scaling on hover. When heartPop animation runs, if user hovers, there might be conflict but that's okay.

Note: The CSS rule .like-btn:hover .heart creates transform scaling for .heart; the heartPop animation also changes transform. Two transforms may conflict; the later one probably overrides.

Better to separate hover from animation: apply to .like-btn:hover .heart path? Actually we want to enlarge heart slightly on hover only. The heartPop overrides transform (coming from animation). But after the animation finishes, the transform property will be at whatever keyframe (like scale 1). The hover transform may not occur after animation? Actually if you are hovering, the animation CSS has higher priority? The order: the animation property usually overwrites transform property for the duration; after animation ends, the transform property returns to default (or last keyframe? With forwards it persists?). We used no "forwards"? Actually we didn't set animation-fill-mode: forwards; but we didn't need to persist transform after animation; the pop returns to final transform as keyframe 100% set to scale(1). That matches normal state. So after animation ends, transform property is at scale(1) (the default). So hover scaling can still apply if user hovers after animation.

Thus it's okay.

Now we need to ensure no errors in console. Probably none.

Check we hide default input; we used position absolute left -9999. That's okay.

Tag <label> for is proper; the checkbox is initially unchecked.

Potential bug: The CSS for #like:checked + .like-btn .heart path sets fill and stroke and animation. The animation qualifies to the path element: need to assign animation to the path (the one with fill). This is okay because we have path with animation.

The @keyframes heartPop defined with transform; but transform is applied to the path. The path will be transformed for scaling and rotation, but the scaling needs transform-origin at 50% center. We set transform-origin for .heart (the SVG) but not for path. We can add transform-origin: 50% 50% for .heart path as well. Alternatively, apply animation to .heart (the container) rather than path. That may be simpler: apply animation to .heart. But we have .heart path gets fill; we could apply animation to .heart.

Better approach: #like:checked + .like-btn .heart { animation: heartPop 0.6s; } The heart container will have transform. Also set fill for path separately.

Thus modify: Set #like:checked + .like-btn .heart { animation: heartPop .6s; } and separate path fill styling.

Thus need adjust CSS.

Current code: #like:checked + .like-btn .heart path { fill: #e74c3c; stroke: none; animation: heartPop 0.6s; } That will animate path transform, but path transform may cause scaling/clash with viewBox perhaps. But it's fine.

But actually path transform origin may need to be set.

Maybe easier to attach animation to .heart element.

Thus:

#like:checked + .like-btn .heart {
    animation: heartPop 0.6s;
}
#like:checked + .like-btn .heart path {
   fill:#e74c3c;
   stroke:none;
}

But will the heart fill change with path? Yes.

Thus adjust CSS accordingly.

Now after that, the .heart hover scaling should also work; but we need to ensure when heart is animating, the hover scaling may apply to .heart container.

Ok.

Now update CSS accordingly.

Thus final CSS snippet would be:

.like-btn:hover .heart { transform: scale(1.1); }

But we have separate transform for .heart when hovered (like scaling). And .heart Pop animation also sets transform.

This should work.

Now we need to adjust CSS for particle animation: The animation is set on .particle only when #like:checked + .like-btn .particle { animation: popParticle .6s forwards; }

Now background of page: #f7f7f7.

Now final code:

Outputs as an HTML code block.

Make sure we have proper indentation.

One more improvement: The .like-btn should have a visible answer for a "crazy animation". The heart scaling, rotation, and pop of particles is decent. Could also add a "burst" of scaling outlines after the animation. Could also add a pseudo-element for multi-frames. That seems okay.

Now test the code mentally:

Open page. Body centered. .like-btn is an inline-block with width/height 80x80. The label includes the heart (svg). The heart stylized as outline. The particles are absolutely placed but invisible initially.

When click heart, input toggles to checked. This triggers: .heart receives animation heartPop, path fill turning red.

The .particle elements each have animation popParticle that moves them outward and fade.

The heartPop keyframes: transforms scaled and rotated. Should be visible.

The particle animation uses var(--dx) and var(--dy) defined for each particle.

Check that var values are pixel, negative or positive; combined with calc(-50% + var(--dx)) — the negative sign might cause potential double sign confusion: both -50% and var(--dx). For instance for p1: var(--dx) = -30px. So calc(-50% + -30px). That's fine.

Now potential if var is negative: you could also write var(--dx) without sign e.g., -30px is negative; works.

Thus translation final will be -50% - 30px.

All good.

We'll ensure exit if there's error: In older browsers, using variable inside calc within keyframes may have issues? But modern Chrome supports that.

Thus final HTML block is ready.

Now ensure no external resources. All inline.

Now output exactly one fenced code block with html.

Proceed accordingly.