gpt-oss-120b

The task: create a "like" button in pure CSS, no JavaScript, that does a crazy animation when you click it. Must output HTML code with CSS inline, no JS. Must be self-contained. Should be visible on first paint. Use a button that toggles state on click using :checked pseudo-class on a hidden checkbox. Use CSS animation for hearts or explosions.

We can make a like button using a checkbox input hidden, label with heart icon (maybe using Unicode or an SVG). When checked, apply animation: e.g., scaling, rotating, color change, and some sparkles using pseudo-elements with keyframe animation.

We need to ensure it's pure CSS, no external fonts—can use Unicode heart (❤️) or create using CSS shapes. Simpler: use a label with a heart shape via CSS using :before/:after. We'll do an input type=checkbox id=like hidden; label for=like class=like-button. We'll style the label to show a heart shape using CSS, maybe as a simple shape: using Clip-path?? But we can also use an inline SVG inside label, and animate its fill and transform. SVG is allowed.

We'll embed an SVG heart (path) inside label. Styling: when input:checked + label, apply .liked pseudo-classes. Use ::before and ::after for particles.

Implement animation: on checking (like), trigger keyframes for scaling up and then down with bounce, plus maybe rotate. Use animation on :checked + label .heart.

But since we need the animation only on click, we can use CSS animation that triggers when the checkbox becomes checked using animation property, but it will only run once when state changes; but after unchecking, you need to reset? But we want a like (maybe toggle). Could use toggle; but could also use :active pseudo-class for a quick effect. However they want "crazy animation when you click it". We can animate on :checked, using animation: pop 0.6s ease-out forwards; the animation runs each time the state transitions from unchecked to checked. After unchecked, you could have another animation? But it's okay.

Simplify: clicking toggles, but only animate when going to checked. Use .like-input:checked + .like-label .heart { animation: explode 0.8s forwards; } Also have pseudo-elements particles using keyframes that animate and then disappear.

We'll also include a "like count" maybe.

Make sure everything is visible on first paint. We'll show a heart button with message.

We'll produce HTML: <div class="like-container"><input type="checkbox" id="like" class="like-input"><label for="like" class="like-label"><svg ... class="heart"...></svg></label></div>

Add style to hide input visually.

Define CSS: .like-label { cursor:pointer; display:inline-block; width:80px; height:80px; position:relative; } .heart { fill:#ccc; transition: fill .2s; transform-origin:center; } .like-input:checked + .like-label .heart { fill:#e74c3c; animation: pop 0.5s ease-out forwards; } .like-input:checked + .like-label::before, ::after for sparks.

Define keyframes pop: 0% { transform:scale(0); } 50% { transform:scale(1.4); } 100% { transform:scale(1); }

Define sparkles as ::before and ::after with small circles that appear from center with rotation and fade.

Simpler: create multiple particles using multiple pseudo-elements with multiple layers using :before and :after with multiple radial gradients? Hard.

Alternative: we can embed multiple small divs with class .spark that become visible on :checked using adjacent sibling combinator and CSS animation with delay and transform. But we need to have them present in HTML, but hidden initially; they become animated when input:checked. That's pure CSS.

Simplify: Add 5 <span class="spark"></span> inside label. They are positioned absolute at center, small circles with background color. When input:checked + label .spark { animation: burst 0.6s forwards; } Also use nth-child to vary direction.

Implement.

Make the container responsive - center.

Make no JS.

Now create final output: HTML with inline CSS. Ensure width responsive: use max-width.

Will be visible on first paint: button heart visible.

Now craft final code block.