Exploding like buttonOne-line

GPT-6 Luna

by OpenAIReasoningClean

Open in new window

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

How it went

Total time: 33.6 s
Cost: $0.0017
Output tokens: 3,324
Spent thinking: 309 tokens
Speed: 159.1 tok/s
Console errors: 0

First token after: 12.7 s
First visible text after: 13.8 s
Prompt tokens: 356
Code size: 8.6 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"low"}
Max output: 64,000 tokens
Generated: Nov 10, 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 · 305 lines

Download

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Like Button — Pure CSS</title>
<style>
  * { box-sizing: border-box; }

  :root {
    color-scheme: light;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #262238;
    background:
      radial-gradient(ellipse at 50% 44%, rgba(255,255,255,.9), transparent 37%),
      linear-gradient(135deg, #f9edff 0%, #f0f1ff 50%, #e9f8ff 100%);
  }

  .scene {
    position: relative;
    width: min(100%, 860px);
    min-height: 580px;
    display: grid;
    place-items: center;
    padding: 30px;
  }

  .ambient {
    position: absolute;
    border-radius: 50%;
    filter: blur(1px);
    pointer-events: none;
  }
  .ambient.a {
    width: 260px; height: 260px;
    left: 8%; top: 8%;
    background: radial-gradient(circle, rgba(255,174,209,.22), transparent 70%);
  }
  .ambient.b {
    width: 340px; height: 340px;
    right: 3%; bottom: 1%;
    background: radial-gradient(circle, rgba(159,194,255,.24), transparent 70%);
  }

  .card {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    padding: 62px 36px 54px;
    text-align: center;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 34px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 28px 80px rgba(89,73,132,.13), 0 3px 12px rgba(69,52,104,.05);
    backdrop-filter: blur(16px);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 19px;
    padding: 8px 13px;
    border-radius: 99px;
    color: #8753b8;
    background: #f6edff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .eyebrow::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #b66be7;
    box-shadow: 0 0 0 4px #ead8fb;
  }

  h1 {
    margin: 0;
    color: #28243b;
    font-size: clamp(34px, 6vw, 48px);
    line-height: 1.08;
    letter-spacing: -.055em;
  }
  .subtitle {
    margin: 14px 0 38px;
    color: #8b879b;
    font-size: 15px;
    line-height: 1.6;
  }

  .control {
    position: relative;
    display: inline-block;
  }
  .toggle {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    clip-path: inset(50%);
  }

  .like-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-width: 192px;
    height: 72px;
    padding: 0 27px;
    overflow: visible;
    border: 0;
    border-radius: 22px;
    color: white;
    background: linear-gradient(135deg, #ff6291, #ed3e78);
    box-shadow: 0 12px 24px rgba(231,57,112,.26), inset 0 1px 0 rgba(255,255,255,.35);
    cursor: pointer;
    user-select: none;
    transition: transform .2s ease, box-shadow .25s ease, background .3s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .like-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 17px 30px rgba(231,57,112,.32), inset 0 1px 0 rgba(255,255,255,.35);
  }
  .like-button:active { transform: translateY(1px) scale(.97); }
  .toggle:focus-visible + .like-button {
    outline: 4px solid rgba(168,104,226,.45);
    outline-offset: 6px;
  }

  .heart {
    display: block;
    position: relative;
    z-index: 2;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 29px;
    line-height: 1;
    transform-origin: center;
    text-shadow: 0 2px 4px rgba(158,30,80,.2);
  }
  .button-text {
    position: relative;
    z-index: 2;
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.02em;
  }

  .count {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 31px;
    height: 27px;
    padding: 0 8px;
    border-radius: 99px;
    color: #fff;
    background: rgba(255,255,255,.22);
    font-size: 12px;
    font-weight: 800;
  }
  .count::after { content: "24"; }
  .toggle:checked + .like-button .count::after { content: "25"; }

  .toggle:checked + .like-button {
    background: linear-gradient(135deg, #a66ae9, #7450d9);
    box-shadow: 0 12px 26px rgba(111,70,202,.32), inset 0 1px 0 rgba(255,255,255,.35);
  }
  .toggle:checked + .like-button .heart {
    animation: heart-pop .68s cubic-bezier(.16,1.65,.45,1) both;
  }
  @keyframes heart-pop {
    0% { transform: scale(.25) rotate(-35deg); }
    48% { transform: scale(1.65) rotate(18deg); }
    72% { transform: scale(.82) rotate(-9deg); }
    100% { transform: scale(1) rotate(0); }
  }

  .ring {
    position: absolute;
    z-index: 0;
    left: 50%; top: 50%;
    width: 72px; height: 72px;
    border: 2px solid rgba(255,255,255,.8);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,-50%) scale(.3);
  }
  .toggle:checked + .like-button .ring {
    animation: ring-pop .7s ease-out both;
  }
  @keyframes ring-pop {
    0% { opacity: .9; transform: translate(-50%,-50%) scale(.3); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(2.7); }
  }

  .spark {
    position: absolute;
    z-index: 1;
    top: 50%; left: 50%;
    width: 9px; height: 9px;
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    background: #ffe278;
  }
  .spark:nth-of-type(1) { --x: -73px; --y: -48px; --r: 25deg; background: #ffdf69; }
  .spark:nth-of-type(2) { --x: 74px; --y: -43px; --r: 70deg; background: #fff; }
  .spark:nth-of-type(3) { --x: -85px; --y: 11px; --r: -35deg; width: 7px; height: 7px; background: #ffb5d4; }
  .spark:nth-of-type(4) { --x: 83px; --y: 16px; --r: 45deg; width: 7px; height: 7px; background: #fff; }
  .spark:nth-of-type(5) { --x: -43px; --y: 54px; --r: 75deg; width: 6px; height: 6px; background: #a9f0e4; }
  .spark:nth-of-type(6) { --x: 48px; --y: 55px; --r: -25deg; width: 8px; height: 8px; background: #ffd36d; }
  .toggle:checked + .like-button .spark {
    animation: fly .72s cubic-bezier(.15,.75,.35,1) both;
  }
  .toggle:checked + .like-button .spark:nth-of-type(3n) { animation-delay: .04s; }
  @keyframes fly {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.15) rotate(var(--r)); }
  }

  .hint {
    margin: 24px 0 0;
    color: #aaa5b8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .025em;
  }

  .tiny-heart {
    position: absolute;
    color: rgba(242,100,157,.23);
    font-size: 24px;
    animation: drift 4s ease-in-out infinite;
    pointer-events: none;
  }
  .tiny-heart.one { left: 17%; top: 27%; transform: rotate(-14deg); }
  .tiny-heart.two { right: 14%; top: 34%; font-size: 17px; animation-delay: -1.4s; }
  .tiny-heart.three { right: 20%; bottom: 18%; font-size: 27px; animation-delay: -2.4s; }
  @keyframes drift { 50% { translate: 0 -9px; rotate: 8deg; } }

  @media (max-width: 520px) {
    .scene { min-height: 100svh; padding: 18px; }
    .card { padding: 50px 22px 44px; border-radius: 28px; }
    .subtitle { margin-bottom: 32px; }
    .tiny-heart.one { left: 4%; top: 19%; }
    .tiny-heart.two { right: 5%; top: 23%; }
    .tiny-heart.three { right: 7%; bottom: 12%; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  }
</style>
</head>
<body>
  <main class="scene">
    <div class="ambient a"></div>
    <div class="ambient b"></div>
    <span class="tiny-heart one">♥</span>
    <span class="tiny-heart two">♥</span>
    <span class="tiny-heart three">♥</span>

    <section class="card" aria-label="Pure CSS like button demo">
      <div class="eyebrow">100% CSS · 0% JavaScript</div>
      <h1>A little love<br>goes a long way.</h1>
      <p class="subtitle">Go on. Give the button a tap.</p>

      <div class="control">
        <input class="toggle" type="checkbox" id="like">
        <label class="like-button" for="like">
          <span class="ring"></span>
          <span class="spark"></span><span class="spark"></span>
          <span class="spark"></span><span class="spark"></span>
          <span class="spark"></span><span class="spark"></span>
          <span class="heart" aria-hidden="true">♥</span>
          <span class="button-text">Like this</span>
          <span class="count" aria-label="24 likes"></span>
        </label>
      </div>

      <p class="hint">TAP TO LIKE · TAP AGAIN TO UNLIKE</p>
    </section>
  </main>
</body>
</html>

Reasoning trace (309 tokens)

**Clarifying animation design**

I need to focus on ensuring the animation is visible during the first paint, as the default UI isn’t appealing. Maybe I should check if the click animation should only trigger if it’s initially unchecked. I’ve thought about using a checkbox that’s visually clipped, while considering a heart shape with SVG could be simpler than a CSS heart clip-path. For the heart, I’d use a rough CSS polygon. I’m looking into robust animations with glyphs and particle effects!