Exploding like buttonOne-line

GPT-5 Nano

by OpenAIReasoningClean

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 1 min 10 s
Cost: $0.0044
Output tokens: 11,017
Spent thinking: 8,448 tokens
Speed: 165.8 tok/s
Console errors: 0

First token after: 3.1 s
First visible text after: 57.9 s
Prompt tokens: 356
Code size: 7.4 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-5-nano
Reasoning sent: {"effort":"medium"}
Max output: 128,000 tokens
Generated: Nov 12, 2026

What it was asked

The prompt

“a "like" button in pure CSS, no JavaScript, that does a crazy animation when you click it”

System prompt, sent with every prompt

You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 221 lines

Download

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS-Only Like Button with Crazy Animation</title>
<style>
  :root{
    --bg: #0b0b12;
    --card: #14161e;
    --text: #e5e5e7;
    --muted: #b5b5ba;
    --heart-gray: #bbb;
    --heart-red: #ff4d7e;
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 20% 10%, rgba(255,0,140,.08), transparent 40%),
                radial-gradient(circle at 80% 0%, rgba(0,180,255,.08), transparent 40%),
                linear-gradient(#0b0b12, #0b0b12);
    min-height: 100%;
  }

  .stage {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 32px;
  }

  .card {
    width: min(720px, 92vw);
    background: linear-gradient(180deg, rgba(20,22,34,.98), rgba(14,16,28,.98));
    border: 1px solid #2a2a2a;
    border-radius: 20px;
    padding: 34px 28px;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
  }

  h1 {
    margin: 0 0 6px;
    font-size: clamp(20px, 3vw, 28px);
    letter-spacing: .2px;
  }
  p.meta {
    margin: 0 0 20px;
    color: var(--muted);
    font-size: 14px;
  }

  /* Like widget area */
  .like-wrap {
    position: relative;
    display: inline-block;
    margin: 6px 0 0;
  }

  /* Visually-hidden input (checkbox hack) but keeps accessibility */
  .toggle {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
  }

  /* The clickable heart button (styled label) */
  .button {
    position: relative;
    display: inline-block;
    width: 140px;
    height: 140px;
    cursor: pointer;
    border-radius: 40px;
    user-select: none;
    outline: none;
    border: 0;
    padding: 0;
    margin: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), transparent 40%), #1a1d28;
    transition: transform .2s ease;
  }
  @media (hover: hover) {
    .button:hover { transform: translateY(-2px); }
  }

  /* Center the heart SVG inside the button */
  .heart-svg {
    position: absolute;
    left: 50%; top: 50%;
    width: 110px; height: 110px;
    transform: translate(-50%, -50%);
    display: block;
  }
  .heart-svg path { fill: var(--heart-gray); transition: fill .25s ease; transform-origin: center; }

  /* Hint text visible by default, hints the user to click */
  .hint {
    position: absolute;
    bottom: -28px; left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #d9d9d9;
    opacity: .95;
    white-space: nowrap;
    pointer-events: none;
  }

  /* Burst layer: a bunch of little dots that fly outward when clicked */
  .burst {
    position: absolute;
    left: 50%; top: 50%;
    width: 180px; height: 180px;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .burst span {
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: #ffd166;
    opacity: 0;
  }

  /* Motion: each dot travels outward along its own vector once checked */
  @keyframes burst {
    0% {
      transform: translate(-50%, -50%) translate(0,0) scale(0.4);
      opacity: 0;
    }
    15% { opacity: 1; }
    100% {
      transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) translate(0,0) scale(1);
      opacity: 0;
    }
  }

  /* Color pulse / pop when liked */
  @keyframes pop {
    0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
    40% { transform: scale(1.25); filter: drop-shadow(0 10px 18px rgba(255,77,126,.8)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
  }

  /* Apply animations only after the input is checked (CSS-only toggle) */
  #like:checked ~ .button .heart-svg { animation: pop 0.8s ease; }
  #like:checked ~ .button .burst span { animation: burst 0.9s forwards; animation-delay: var(--delay); }

  /* Change heart color when liked */
  #like:checked ~ .button .heart-path { fill: var(--heart-red); }

  /* Hide the hint when liked (gives a nice reveal) */
  #like:checked ~ .button .hint { display: none; }

  /* Small screens: scale the button down for 375px wide viewports */
  @media (max-width: 520px) {
    .button { width: 120px; height: 120px; border-radius: 28px; }
    .heart-svg { width: 90px; height: 90px; }
    .burst { width: 150px; height: 150px; }
  }

  /* Reduce motion preference */
  @media (prefers-reduced-motion: reduce) {
    .heart-svg { animation: none !important; }
    .burst span { animation: none !important; opacity: 1 !important; transform: none !important; }
  }
</style>
</head>
<body>
  <div class="stage">
    <section class="card" aria-label="CSS-only like button demo">
      <h1 style="margin:0 0 6px 0; font-size: clamp(20px, 5vw, 28px);">CSS-only Like Button</h1>
      <p class="meta" style="margin:0 0 18px; color:#c9c9cf;">
        A pure CSS like button. Click it to see a crazy particle burst and a color-filled heart. No JavaScript required.
      </p>

      <div class="like-wrap" aria-label="Like widget">
        <!-- Hidden checkbox toggle (for CSS-only interaction) -->
        <input type="checkbox" id="like" class="toggle" />

        <!-- Clickable heart button (styled label that toggles the checkbox) -->
        <label for="like" class="button" aria-label="Like button" title="Like">
          <!-- Heart shape (SVG so we have crisp visuals) -->
          <svg class="heart-svg" viewBox="0 0 32 29" width="110" height="110" aria-hidden="true">
            <!-- Path uses a class to change color when checked -->
            <path class="heart-path" d="M23.6,0c-2.5,0-4.9,1.1-6.6,2.9C14.3,1.9,11.9,0,9.3,0C4.2,0,0,4.3,0,9.5C0,13.9,2.6,17.7,7,20.9C9.9,22.9,13.1,24.4,16,25.8c2.9-1.4,6.1-2.9,9-5C29.2,17.7,32,13.9,32,9.5C32,4.3,27.8,0,23.6,0z" fill="#bbb"/>
          </svg>

          <!-- Subtle hint text that disappears after a click -->
          <span class="hint" aria-hidden="true">Click to like</span>

          <!-- Burst visuals (12 particles with varying directions and delays) -->
          <div class="burst" aria-hidden="true">
            <span style="--dx:-90px; --dy:-60px; --delay:.00s; background:#ffd166"></span>
            <span style="--dx:-50px; --dy:-85px; --delay:.04s; background:#ff6b6b"></span>
            <span style="--dx:0px;  --dy:-110px; --delay:.08s; background:#fff36f"></span>
            <span style="--dx:50px;  --dy:-85px; --delay:.12s; background:#6ef3ff"></span>
            <span style="--dx:90px;  --dy:-60px; --delay:.16s; background:#ff6bd6"></span>
            <span style="--dx:110px; --dy:-20px; --delay:.20s; background:#a0f0d9"></span>
            <span style="--dx:70px;  --dy:20px;  --delay:.24s; background:#ffd1a8"></span>
            <span style="--dx:0px;   --dy:90px;  --delay:.28s; background:#ffd1e1"></span>
            <span style="--dx:-70px; --dy:60px;  --delay:.32s; background:#d1a7ff"></span>
            <span style="--dx:-110px;--dy:20px;  --delay:.36s; background:#98f5e1"></span>
            <span style="--dx:-60px; --dy:70px;  --delay:.40s; background:#8affc1"></span>
            <span style="--dx:60px;  --dy:70px;  --delay:.44s; background:#ff99c8"></span>
          </div>
        </label>
      </div>
    </section>
  </div>

  <!-- No JavaScript is used; everything is CSS-driven. -->
</body>
</html>

Reasoning trace (8,448 tokens)

**Evaluating keyboard interactions**

I need to ensure the iframe only receives keyboard events after a user clicks it. If the demo involves keyboard use, I'll display a clear message saying "Click or press a key to start." I'm not using JavaScript for keyboard events; instead, I can use CSS to respond to the focus. Even though the demo isn't a game, I can implement a CSS-only "like" button while adhering to the rule about the starting message.**Implementing overlay messages**

It's optional, but I need to ensure the iframe only receives keyboard events after a user clicks it. Since our demo won't use keyboard events and will rely on mouse or touch, I can add a small overlay text saying "Click the heart to start," which would disappear after the first click. Without using JavaScript, I could use CSS to show the overlay by default, and hide it when the checkbox is checked. I'll implement the overlay div inside the container and set it to not block pointer events.**Creating the implementation plan**

I'm planning to use a container with a hidden checkbox input for the like button. It's essential to name it "like" to ensure the label can toggle it, even if it’s hidden. The HTML will look something like this: an input of type checkbox with an ID of "like" and a corresponding label. The label will display a heart icon using CSS; I might use either simple CSS shapes with pseudo-elements or an inline SVG since external assets aren't allowed. I'll figure out the best way to create that heart!**Clarifying CSS requirements**

The phrase "pure CSS" means I can't use JavaScript. While inline SVG might not fit into that definition, it still falls under CSS since it doesn't utilize JS. However, I believe the requirement is leaning more towards animations strictly done with CSS. Creating the heart shape using pseudo-elements feels more in line with a "CSS-only" approach.

After the heart is clicked, I plan a "crazy animation" with bursts of particles. I'll achieve this through multiple CSS-generated small circles that animate outward when the heart is checked, using keyframes and specific selectors.**Designing the heart animation**

I'm setting up a burst animation using 12 spans for the heart button. Each span will represent a particle that animates outward upon clicking the heart. I'll use CSS to define these spans and create the burst effect with specific transform properties controlled by CSS variables for direction.

After clicking the heart, there will be a "crazy animation" with particles that animate in radial directions. The hint text “Click to like” will disappear upon interaction, ensuring a smooth user experience. I also want to change the heart's color from gray to pink when checked while keeping it purely CSS-based.**Implementing heart animations**

I'm working on the heart button animations using CSS keyframes. I want a "pop" effect when it's clicked and a "beat" effect for the heart since it’s an SVG element. I'll use keyframes to scale and apply filters, ensuring the heart animates smoothly.

The goal is to create a visually appealing interface with burst animations when the heart is checked. I'll utilize CSS variables for direction and timing, resulting in a fun user interaction without complex JavaScript. I'll ensure the checkbox remains accessible while hidden for a seamless user experience.**Creating heart animations with CSS**

I'm working on implementing a CSS "shadow petals" effect for a heart animation by adding a pseudo-element with a radial gradient behind the heart. I'll use keyframes for the pop effect, ensuring that the heart scales appropriately without causing a horizontal scrollbar.

Accessibility is important, so I’ll include an aria-label. In the HTML structure, the checkbox input will be hidden but still functional for toggling via its label, which will hold the heart SVG and a burst animation.

Lastly, I’ll make adjustments for different screen sizes and ensure everything looks good without any flash of unstyled content.**Implementing burst animations in CSS**

I'm setting up 12 spans with different colors for the burst effects on my like button. To achieve this, I'll use inline styles to set up the `--dx`, `--dy`, and `--delay` properties for each span, along with their respective background colors.

Using `@keyframes`, I'll manage how each burst animates, ensuring it only triggers when the button is checked. I want to make sure there's no JavaScript involved, so everything runs smoothly with just CSS and the layout adapts to screen sizes. Now, I'll write the final HTML and CSS code accordingly.