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: 29.3 s
Cost: $0.0017
Output tokens: 4,104
Spent thinking: 2,048 tokens
Speed: 152.8 tok/s
Console errors: 0

First token after: 2.4 s
First visible text after: 16.3 s
Prompt tokens: 356
Code size: 6.4 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-5-nano
Reasoning sent: {"effort":"low"}
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 · 222 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pure CSS Like Button with Crazy Animation</title>
<style>
  :root {
    --bg: #0f1115;
    --card: #141922;
    --text: #e6e6f0;
    --heart: #e74c3c;
  }

  html, body {
    height: 100%;
    margin: 0;
  }

  body {
    background: radial-gradient(circle at 20% -10%, rgba(231,76,60,.25), transparent 40%),
                radial-gradient(circle at 80% 0%, rgba(52,152,219,.15), transparent 40%),
                linear-gradient(#0b0e14, #0b0e14);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    display: grid;
    place-items: center;
    padding: 20px;
    box-sizing: border-box;
  }

  .card {
    background: rgba(20,25,34,.9);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: 28px;
    width: min(820px, 92vw);
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: center;
  }

  h1 {
    font-size: 1.4rem;
    letter-spacing: .4px;
    margin: 0 0 14px;
    text-align: center;
    opacity: .95;
  }

  p.meta {
    text-align: center;
    color: #cbd5e1;
    margin: 0 0 20px;
    font-size: .95rem;
  }

  /* The pure CSS like button using a hidden checkbox (no JS) */
  .like-wrap {
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
    margin-top: 6px;
  }

  input.like-checkbox {
    /* purely CSS state holder, hidden but accessible */
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* The interactive area (click to toggle) */
  .like-area {
    position: relative;
    width: 180px;
    height: 180px;
  }

  /* The clickable heart button (label for the checkbox) */
  .like-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 22px;
    isolation: isolate;
    /* subtle glow when idle */
    filter: saturate(1);
  }

  /* Heart shape built from three circles (classic CSS heart) */
  .heart {
    position: relative;
    width: 90px;
    height: 90px;
    transform: rotate(-45deg);
    transition: transform 350ms cubic-bezier(.25,.8,.25,1), filter 350ms;
  }

  .heart, .heart:before, .heart:after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    background: var(--heart);
    border-radius: 50%;
    top: 0;
    left: 0;
  }

  .heart:before { left: 45px; top: 0; }
  .heart:after  { left: 0; top: 45px; }

  /* Subtle idle animation to hint at interactivity */
  @keyframes idlePulse {
    0%,100% { transform: rotate(-45deg) scale(1); }
    50%    { transform: rotate(-45deg) scale(1.04); }
  }
  .like-button .heart {
    animation: idlePulse 4s ease-in-out infinite;
  }

  /* When checked, stop idle pulse and trigger a big pop plus color glow */
  input.like-checkbox:checked + .like-area .heart {
    animation: none;
    transform: rotate(-45deg) scale(1.12);
    filter: drop-shadow(0 0 14px rgba(255, 109, 109, .9)) saturate(1.2);
  }

  /* Crazy "burst" particles using CSS only */
  .bursts {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0; height: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
  }

  .b {
    position: absolute;
    width: 8px; height: 8px;
    background: #f1c40f;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }

  /* Burst animation (uses per-dot offsets) */
  @keyframes burst {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; }
    60%  { transform: translate(var(--dx), var(--dy)) scale(1.25); opacity: 0.95; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.0); opacity: 0; }
  }

  /* When the checkbox is checked, run bursts with staggered delays */
  input.like-checkbox:checked ~ .bursts .b {
    animation: burst 700ms forwards;
  }

  /* Individual burst timing and direction (set inline per dot) */
  /* We'll use CSS variables --dx and --dy to steer paths. Defaults keep it invisible if not set. */
  .b { animation-delay: 0s; }

  /* Layout responsiveness for small viewports */
  @media (max-width: 600px) {
    .like-area { width: 140px; height: 140px; }
    .heart { width: 70px; height: 70px; }
  }

  /* Prevent horizontal scroll on tiny widths */
  * { box-sizing: border-box; }
</style>
</head>
<body>
  <div class="card" aria-label="Pure CSS Like Button Demo">
    <h1>Pure CSS Like Button with Crazy Animation</h1>
    <p class="meta">Click the heart to like. All animation is powered by CSS using a checkbox hack (no JavaScript).</p>

    <div class="like-wrap" aria-label="Like control">
      <!-- Hidden checkbox holds the state purely in CSS -->
      <input class="like-checkbox" type="checkbox" id="like" aria-label="Like toggle" />

      <div class="like-area" aria-label="Like area containing heart and bursts">
        <!-- The clickable heart (trigger) -->
        <label class="like-button" for="like" aria-label="Like button">
          <span class="heart" aria-hidden="true"></span>
        </label>

        <!-- Burst particles that animate outward when liked -->
        <div class="bursts" aria-hidden="true">
          <!-- 8 little dots with individual directions -->
          <span class="b" style="--dx:-70px; --dy:-20px; background:#f1c40f; animation-delay:0s;"></span>
          <span class="b" style="--dx:70px; --dy:-20px; background:#f1c40f; animation-delay:.04s;"></span>
          <span class="b" style="--dx:-50px; --dy:40px; background:#f39c12; animation-delay:.08s;"></span>
          <span class="b" style="--dx:50px; --dy:40px; background:#f39c12; animation-delay:.12s;"></span>
          <span class="b" style="--dx:0px; --dy:-80px; background:#f7d62e; animation-delay:.16s;"></span>
          <span class="b" style="--dx:-20px; --dy:70px; background:#f7d62e; animation-delay:.20s;"></span>
          <span class="b" style="--dx:20px; --dy:70px; background:#f7d62e; animation-delay:.24s;"></span>
          <span class="b" style="--dx:0px; --dy:100px; background:#f1c40f; animation-delay:.28s;"></span>
        </div>
      </div>
    </div>
  </div>

  <!-- No JavaScript is used; all animation is CSS-driven as requested -->
  <script>
    // Intentionally empty: kept for environments that expect a script tag.
  </script>
</body>
</html>

Reasoning trace (2,048 tokens)

**Planning a CSS Like Button**

I'm working on creating a single HTML file for a like button that animates using just CSS, specifically utilizing the checkbox hack for clicks. I'll add a heart icon that animates when checked, along with a label to trigger it. The keyframes will include burst particles using pseudo-elements and box-shadow. I also need to incorporate accessibility by using an input type checkbox. It should start with a prompt like "Click or press a key to start."**Designing a Heart Button Animation**

I'm focusing on creating a heart button with pure CSS, ensuring there are no external fonts. The button will have three layers and use pseudo-elements for burst effects. To achieve the "crazy animation," I'll use confetti particles with `:before` and `:after`. I'll set up a `.like-toggle` input to control the animation and keep everything responsive at 1280x800. The heart button will be centered within a white background, along with five small divs to represent bursts that animate on check. Spans will have different animation delays for a random effect.**Implementing a Like Button**

I’m working on coding a like button using HTML and CSS. First, I'll create an input checkbox for the like action linked to a label that visually represents a heart. The checkbox will be hidden, and the label will serve as the clickable area. For the heart shape, I plan to use CSS to rotate and style two pseudo-elements to form the lobes. This allows for a neat heart shape without clutter, ensuring all the elements are properly positioned and styled.**Adjusting the Like Button Animation**

I’m refining the heart button's visual feel to ensure everything fits nicely. When the checkbox is checked, I want the heart to rotate and scale properly, and maybe even change color! For the burst animations, I plan to create a div containing span elements that represent small dots. These will be hidden initially and set to appear with different animations when checked. Each dot will use CSS variables for animation effects and positioning to create a more dynamic look. Now, I just need to finalize the styles for each span!**Finalizing the Like Button Animation**

I'm outlining the final touches for the like button animation. I'll be using CSS keyframes for burst effects, scaling, and opacity transitions. The structure of my HTML includes the checkbox, label, and bursts with styles set for different animation delays to create a dynamic effect. I’ll ensure that the bursts and heart changes occur when the checkbox is checked. Everything is designed to be self-contained within the HTML for clarity and efficiency. Now, let's craft and finalize this code!