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 25 s
Cost: $0.0045
Output tokens: 11,141
Spent thinking: 8,768 tokens
Speed: 135 tok/s
Console errors: 0

First token after: 2.7 s
First visible text after: 1 min 13 s
Prompt tokens: 356
Code size: 6.7 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-5-nano
Reasoning sent: model default
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 · 212 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{
    --bg1: #0f1020;
    --bg2: #1b113a;
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0b0b1a 0%, #1b1a2b 60%, #0b0b1a 100%);
    color: #fff;
    padding: 20px;
  }

  .card {
    width: min(700px, 92vw);
    background: rgba(255,255,255,0.08);
    border-radius: 28px;
    padding: 28px 28px 34px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.12);
  }

  h1 {
    margin: 6px 0 6px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: .4px;
  }

  .subtitle {
    font-size: 13.5px;
    opacity: .92;
    margin: 0 0 14px;
  }

  /* Pure CSS toggle using a hidden checkbox + label */
  input#like {
    /* Visually hidden but accessible for screen readers */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
  }

  .like-btn {
    display: inline-block;
    position: relative;
    width: 170px;
    height: 170px;
    margin: 16px auto 0;
    border-radius: 28px;
    cursor: pointer;
    user-select: none;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.6) 25%, rgba(255,255,255,.0) 60%),
                linear-gradient(135deg, #fff 0%, #ffd6e8 60%, #ff6b9e 100%);
    box-shadow: 0 12px 22px rgba(0,0,0,.25), inset 0 2px 8px rgba(255,255,255,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .4s ease;
  }

  /* Subtle hover lift for better feedback */
  .like-btn:hover { transform: translateY(-1px); }

  /* The heart built with pure CSS using two rounded pseudo-elements */
  .heart {
    width: 110px;
    height: 110px;
    position: relative;
    transform: rotate(-45deg);
  }

  .heart:before, .heart:after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    background: #ff4a8b;
    border-radius: 60px 60px 0 0;
    top: 0;
    left: 0;
    /* Slight gloss/shine */
    filter: saturate(1.05);
  }

  .heart:before { left: 0; }
  .heart:after { left: 54px; }

  /* A soft glow that animates when a like happens (focus via click) */
  .glow {
    position: absolute;
    width: 150px; height: 150px;
    border-radius: 50%;
    border: 8px solid rgba(255, 102, 178, 0.55);
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
  }

  /* When focused/activated via keyboard or click, the glow can pop in */
  .like-btn:focus-within .glow {
    animation: glow 700ms ease-out forwards;
  }
  @keyframes glow {
    0% { opacity: 0; transform: scale(0.9); }
    40% { opacity: 0.45; transform: scale(1.15); }
    100% { opacity: 0; transform: scale(1.25); }
  }

  /* Burst particles that radiate outward when liked */
  .particle {
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
  }
  .particle[data-color="c1"] { background: #ff6478; }
  .particle[data-color="c2"] { background: #ffd166; }
  .particle[data-color="c3"] { background: #8aff9a; }
  .particle[data-color="c4"] { background: #4cc9ff; }
  .particle[data-color="c5"] { background: #a78bfa; }
  .particle[data-color="c6"] { background: #f472b6; }

  /* Individual burst animation trigger on check */
  input#like:checked + label .heart {
    transform: rotate(-45deg) scale(1.28);
    transition: transform 0.4s ease;
  }

  input#like:checked + label .particle {
    animation: burst 900ms cubic-bezier(.22,.61,.36,1) forwards;
  }

  @keyframes burst {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0.9; }
    60% {
      transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.25);
      opacity: 1;
    }
    100% {
      transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.9);
      opacity: 0;
    }
  }

  /* Fine-tune for small screens so nothing goes off screen */
  @media (max-width: 520px) {
    .like-btn { width: 140px; height: 140px; }
    .heart { width: 100px; height: 100px; }
  }

  /* Accessibility hint: only visible visually if needed (optional) */
  .sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); border:0;
  }

</style>
</head>
<body>
  <div class="card" aria-label="Pure CSS like button demo">
    <h1>Pure CSS Like Button</h1>
    <p class="subtitle">Click the heart. It uses only CSS with a crazy burst of particles on like.</p>

    <!-- Hidden checkbox drives the CSS-only animation -->
    <input type="checkbox" id="like" aria-label="Toggle like" />

    <label for="like" class="like-btn" aria-label="Like button">
      <div class="glow" aria-hidden="true"></div>
      <div class="heart" aria-hidden="true"></div>

      <!-- Burst particles: final positions (dx, dy) around the center; colors vary -->
      <span class="particle" data-color="c1" style="--dx: 70px;  --dy: 0px;   --delay: 0s;"></span>
      <span class="particle" data-color="c2" style="--dx: 60px;  --dy: 35px;  --delay: .05s;"></span>
      <span class="particle" data-color="c3" style="--dx: 60px;  --dy: -35px; --delay: .1s;"></span>
      <span class="particle" data-color="c4" style="--dx: 0px;   --dy: 70px;  --delay: .15s;"></span>
      <span class="particle" data-color="c5" style="--dx: -60px; --dy: 35px;  --delay: .2s;"></span>
      <span class="particle" data-color="c6" style="--dx: -70px; --dy: 0px;   --delay: .25s;"></span>
      <span class="particle" data-color="c2" style="--dx: -60px; --dy: -35px; --delay: .3s;"></span>
      <span class="particle" data-color="c4" style="--dx: 0px;   --dy: -70px; --delay: .35s;"></span>
      <span class="particle" data-color="c3" style="--dx: 35px;  --dy: 60px;  --delay: .4s;"></span>
      <span class="particle" data-color="c1" style="--dx: -35px; --dy: 60px;  --delay: .45s;"></span>
      <span class="particle" data-color="c6" style="--dx: 0px;   --dy: -70px; --delay: .5s;"></span>
      <span class="particle" data-color="c5" style="--dx: 60px;  --dy: -20px; --delay: .55s;"></span>
      <span class="particle" data-color="c3" style="--dx: -48px; --dy: -42px; --delay: .6s;"></span>
      <span class="particle" data-color="c2" style="--dx: 48px;  --dy: -42px; --delay: .65s;"></span>
      <span class="particle" data-color="c4" style="—dx: -48px; --dy: 42px; --delay: .7s;"></span>
    </label>
  </div>
</body>
</html>

Reasoning trace (8,768 tokens)

**Planning a CSS "like" button**

I'm tasked with creating a single HTML file for a "like" button that uses pure CSS without JavaScript. I’ll implement this button using a checkbox hack to allow toggling. The heart icon will be built exclusively with CSS shapes, perhaps using pseudo-elements like :before and :after to form a heart shape. I'm thinking of using rounded shapes or circles combined with a rotated square. Exciting challenge ahead! Let’s get coding!**Enhancing the CSS button experience**

I’m considering making the button more interactive by animating multiple elements when the checkbox is checked. I could scale it up and create bursting particles using pseudo-elements and CSS keyframes. These particles could be simulated with spans for an exploding confetti effect. There’s a note about needing a "click or press a key to start" message, which is usually for games. Since my demo is a pure CSS button, we just need to focus on accessibility and interaction without JavaScript.**Implementing a "Click to like" feature**

To enhance clarity, I'm thinking about adding a "Click to like" text to the button. The constraints indicate that our demo doesn't require "Click or press a key to start," since it only involves clicking. I'll use a hidden checkbox approach that toggles when the label is clicked to trigger animations. The animation should be crazy, with a heart popping, scaling, changing colors, and small particle bursts. I can create 20 span elements to simulate bursts when checked!**Designing a responsive CSS "like" button**

I’m considering using a checkbox to maintain the button's state and create that "crazy animation" on click. The idea is to animate once when the checkbox toggles to checked, then reset when toggled off. Since the requirement states "no JavaScript," I’ll stick to purely CSS solutions. I want the initial view to be engaging, like having a big heart button that displays the number of likes. The design has to be responsive and adapt down to 375px, centered nicely!**Designing a pure CSS heart button**

I’m figuring out how to create a heart button using CSS-only, without any external fonts or images. I’ll have a centered card as the outer container and use a hidden checkbox to control it. The heart will be constructed from a main div and pseudo-elements to form the lobes. I'll define its shape with CSS via border-radius and rotation.

I’ll stick to CSS for animations and toggle interactions, ensuring responsive design and a fun, engaging look!**Implementing a bursting heart animation**

I’m using CSS to design a heart button that animates when clicked. The heart shape is formed by rotating a square and using pseudo-elements for the lobes. The animations for the heart and particle bursts will trigger on the checkbox click. Each particle is a small span positioned around the heart, animating outward with varying colors and movements.

I’ll make sure everything is visually appealing, accessible, and responsive, adding “Like” text below while keeping the input hidden for screen readers. This should create a fun, interactive element!**Designing heart animation with bursts**

I’m working on adding a "crazy animation" to the heart button, which will include rotation and bursts of particles on click. The heart will pulse with a gradient when clicked, scaling up and brightening the color. The button will hold 16 particle spans that animate outward when the heart is pressed.

I’ll ensure the heart is centered in the button, which will use pseudo-elements for the heart shape. Everything needs to be responsive and visually appealing, with effective animations as well!**Calculating particle positions**

I'm determining the positions for 12 particles based on angles. I have coordinates like (70, 0) for 0°, (60.6, 35) for 30°, and so on, which will give a burst effect.

Using CSS variables, I'll define the particle positions and different colors for each. It seems essential to show a "Like" label near the button, ensuring the page loads quickly without external resources. I'll focus on making it accessible, using a label to toggle the checkbox for interaction through the keyboard. Time to create the final code!**Finalizing HTML structure**

I'm crafting the HTML for the pure CSS like button animation while keeping it clean and error-free. The document includes some gradients, styles for positioning, and animations for the button and particles.

I see that a `<script>` tag is included, but since the instructions specify no JavaScript, it should be removed entirely for compliance. I'll also verify that there are no duplicates in the `aria-label` attributes, ensuring accessibility. Once that's set, the code is good to go!**Finalizing HTML and CSS for Animation**

I'm ensuring the bursts appear correctly when checked. The CSS is set to animate the particles once the input is checked, and I've confirmed that the structure is valid with the sibling selector. The heart’s scale will change appropriately. I’m also checking that the CSS applies correctly for the glow effect and that the particle colors are defined using the `data-color` attribute.

Now, I'll finalize the HTML code without the stray script and ensure everything is compiled into one cohesive block for output!