GPT-5 Nano

**Implementing a CSS "like" button**

I need to create a "like" button in pure CSS without any JavaScript, which includes a crazy animation on click. The user wants it to start in self-playing mode. I recall that self-contained web demos need to be renderable in an iframe. I can use the checkbox hack with an input of type "checkbox" and leverage the :checked pseudo-class to activate animations. For the crazy animation, I could consider particle effects or a radial gradient explosion using CSS.**Designing the CSS "like" button**

I’ll create a button by using a label linked to a hidden checkbox. When the checkbox is checked, I can trigger CSS animations like a heart morph or confetti shapes—no JavaScript needed. The guidelines mention a self-contained web demo that starts in a self-playing mode, even though this isn't a game. I need to ensure that the demo looks good initially and shows something meaningful within the first three seconds.**Creating the CSS "Like" button**

I'm planning a demo featuring a large "Like" button with animation powered solely by CSS. I could use confetti-like shapes triggered by CSS keyframes when the button is checked. Initially, it will display "Click to like" alongside a heart icon that animates upon clicking. Even though the guidelines emphasize no JavaScript, I need to include a clear message for accessibility, reminding users to "Click or press a key to start" for keyboard interactions.**Designing the CSS "Like" button**

I'm going to create a "Like" button using a CSS label that toggles a hidden checkbox when clicked. Keyboard interactions aren’t needed here, so I won’t incorporate any keyboard hooking. The final output will be a single code block with complete HTML and inline CSS, but no JavaScript. I'll make a full viewport container with a gradient background and style the button as a heart, utilizing the ::before and ::after pseudo-elements for a nice visual effect.**Building the heart shape with CSS**

I want to create a heart shape for the "Like" button using pure CSS, so I’ll use pseudo-elements to form the lobes and a triangle for the bottom point. I can easily create this heart by overlapping two circles, rotating the container to achieve the shape. Even though inline SVG isn't strictly for CSS, I'm opting to stick to CSS only for clarity.

When the button is clicked, I can scale the heart and trigger small burst animations to create confetti effects. I’ll manage these bursts with CSS, ensuring they'll animate outward when the checkbox is checked, then reset on uncheck.**Structuring the "Like" button**

I'm planning to implement the "Like" button using an input checkbox that is hidden and a label that serves as the clickable area. The label will contain the heart shape and multiple burst spans for the animation. 

To ensure the animations trigger correctly when the checkbox is checked, I'll use CSS sibling selectors. The label will refer to the checkbox's ID, allowing it to toggle the input. I also need to make sure the heart changes color to pink when the button is liked, and I'll structure everything to work purely with CSS.**Creating the heart shape and burst effects**

I'm diving into building the heart as a CSS shape using pseudo-elements within the label. I want the heart to rotate correctly while maintaining its proportions, and consider using a heart emoji or text as a simpler alternative. 

I plan to animate burst shapes that appear when the checkbox is checked. For the burst effects, I’ll use absolute positioning and define individual animations for each burst to explode outward at various angles. It should create a fun and engaging effect when the "Like" button is activated!**Finalizing CSS for heart and burst animation**

I'm implementing CSS transforms for the burst animations. Each burst will have keyframes to transform and rotate as they move outward. With 12 bursts planned, I'll position them in various directions. The heart will also change color and scale when checked, creating an engaging effect. 

I want the design to be responsive and ensure visibility from the first paint, with a friendly message like "Click to Like." Accessibility remains essential, so I'll be mindful of using appropriate ARIA attributes.**Implementing heart animation with bursts**

I’m working on the CSS for the heart and its burst effects. When the heart is clicked, it will change color and scale up, while 12 bursts radiate outward in different directions. Each burst will transform from the center and use absolute positioning combined with a translate function for precise movement. 

I'll also ensure the heart has a glowing effect and the overall design remains accessible, ensuring visible elements appear from the first paint and provide clear user instructions.**Creating a CSS Like Button**

I'm trying to create a pure CSS like button with animations. The HTML structure includes a checkbox for accessibility, and the styling defines an engaging user interface with gradients and animated bursts when the button is clicked. Each burst has a specific animation and color to make it visually appealing. The code also outlines how to transition the heart's color and size on checked, ensuring a fun and interactive experience while remaining accessible.**Finalizing CSS for Button**

I'm adjusting the CSS to center the label's container and manage animations efficiently. It's essential to disable animations for users who prefer reduced motion. The like button's bursts will only appear when clicked, and their initial state will be hidden. I'm also ensuring responsiveness and preventing horizontal scrolling. For accessibility, I'll use screen reader-friendly text. I'll finalize the CSS to create a seamless and visually appealing experience while managing how bursts display post-click.**Designing CSS Animations**

I’m working on the CSS to ensure the animation for the like button triggers correctly each time the input toggles. The animation restarts when the element's style changes. I want to keep the design adaptive for smaller screens and ensure no horizontal scrolling occurs.

I need to solidify the CSS structure and attributes for the bursts, like colors and opacity. I’ll finalize the HTML layout while maintaining accessibility standards. Once everything’s ready, I’ll ensure a seamless animation experience without relying on JavaScript. Time for precise execution!**Finalizing the Code Design**

I need to make sure the label's pseudo-element uses the content property correctly. I’ll implement a ring that appears when the button is checked, and I’ll take note of the necessary animations: a heart “pop” and burst shapes around it. There could be potential issues with the opacity and z-index of the elements, so I’ll adjust them accordingly.

Now it's time to craft the final code in a single HTML block, ensuring everything compiles well within the environment without any extraneous text. Let’s get to coding!**Crafting the HTML Structure**

I'm starting the HTML for a Pure CSS Like Button that features a crazy animation. It’s important to set the doctype and establish the language in the beginning. The head contains metadata like charset, viewport settings, and the title. I've defined CSS variables for color customization to create a visually appealing background with gradients and textures.

The body will feature a card layout to hold the button and include important accessibility features. Creating the structure for the button and its animations is next on my to-do list. Let's keep going!**Finalizing the Like Button Code**

I’m wrapping up the code for my Pure CSS Like Button with burst animations. I need to ensure everything is structured correctly within one code block, following guidelines closely. The bursts have to animate correctly since they start with `opacity: 0` and move them from the center upon activation. 

I also want to keep accessibility in mind, making sure users can click or toggle via keyboard. Finally, I'll check the layout for any stray elements or tags and confirm all details are in place before presenting the final version.