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: 52.8 s
Cost: $0.0032
Output tokens: 6,404
Spent thinking: 1,705 tokens
Speed: 130.4 tok/s
Console errors: 0

First token after: 3.6 s
First visible text after: 21.1 s
Prompt tokens: 356
Code size: 13.0 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"medium"}
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 · 467 lines

Download

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A little love</title>
<style>
  :root {
    color-scheme: dark;
    --pink: #ff4d81;
    --pink-light: #ff8bad;
    --violet: #a77bff;
    --ink: #171324;
    --muted: #aaa4bb;
  }

  * { box-sizing: border-box; }

  body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    overflow-x: hidden;
    padding: 28px 18px;
    color: #fff;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(ellipse at 15% 15%, rgba(119, 69, 200, .20), transparent 34%),
      radial-gradient(ellipse at 90% 83%, rgba(255, 63, 128, .12), transparent 31%),
      #100e18;
  }

  .card {
    position: relative;
    isolation: isolate;
    width: min(100%, 680px);
    min-height: 650px;
    padding: 38px 32px 30px;
    overflow: hidden;
    text-align: center;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 30px;
    background:
      radial-gradient(ellipse at 50% 43%, rgba(128, 74, 165, .15), transparent 42%),
      linear-gradient(145deg, rgba(35,30,48,.98), rgba(24,20,34,.98));
    box-shadow: 0 32px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
  }

  .card::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 380px;
    height: 380px;
    top: 135px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(179, 88, 255, .055);
    filter: blur(55px);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    color: #d7cbe8;
    background: rgba(255,255,255,.035);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .15em;
    text-transform: uppercase;
  }

  .eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff6c9a;
    box-shadow: 0 0 11px #ff6c9a;
  }

  h1 {
    margin: 22px 0 8px;
    font-size: clamp(34px, 6vw, 48px);
    line-height: 1.08;
    font-weight: 760;
    letter-spacing: -.045em;
  }

  h1 span {
    color: #ff7ca1;
    background: linear-gradient(90deg, #ff8da9, #c894ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .intro {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
  }

  .stage {
    position: relative;
    height: 286px;
    display: grid;
    place-items: center;
    margin: 6px 0 0;
  }

  .orbit {
    position: absolute;
    width: 216px;
    height: 216px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 50%;
    animation: orbit-drift 12s linear infinite;
  }

  .orbit::before,
  .orbit::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c49cff;
    box-shadow: 0 0 15px rgba(196,156,255,.9);
  }

  .orbit::before { top: 28px; left: 27px; }
  .orbit::after { right: 14px; bottom: 51px; width: 5px; height: 5px; background: #ff7da2; }

  .orbit.orbit-inner {
    width: 164px;
    height: 164px;
    border-style: dashed;
    border-color: rgba(255,255,255,.08);
    animation-direction: reverse;
    animation-duration: 18s;
  }

  .orbit-inner::before {
    top: 11px;
    left: 74px;
    width: 4px;
    height: 4px;
    background: #fff;
  }

  .like-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
  }

  .like-control {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 154px;
    height: 154px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(145deg, #ff668e, #ee3475 74%);
    box-shadow:
      0 15px 38px rgba(241,50,115,.31),
      inset 0 2px 2px rgba(255,255,255,.38),
      inset 0 -8px 18px rgba(144,20,77,.22);
    transition: transform .2s ease, box-shadow .25s ease, background .3s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .like-control:hover {
    transform: translateY(-3px) scale(1.035);
    box-shadow: 0 20px 48px rgba(241,50,115,.42), inset 0 2px 2px rgba(255,255,255,.4);
  }

  .like-control:active { transform: scale(.94); }

  .like-input:focus-visible + .like-control {
    outline: 3px solid #fff;
    outline-offset: 7px;
  }

  .heart {
    width: 67px;
    height: 67px;
    overflow: visible;
    filter: drop-shadow(0 3px 5px rgba(130, 17, 61, .22));
    transition: transform .25s ease;
  }

  .heart path {
    fill: transparent;
    stroke: #fff;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill .25s ease;
  }

  .like-control::before {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px solid rgba(255,120,164,.0);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }

  .like-control::after {
    content: "";
    position: absolute;
    inset: -19px;
    border: 2px solid rgba(255,126,170,0);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }

  .like-input:checked + .like-control {
    background: linear-gradient(145deg, #ff8ea9, #ff4d86 72%);
    box-shadow:
      0 0 0 8px rgba(255,84,137,.09),
      0 0 48px rgba(255,71,132,.56),
      inset 0 2px 2px rgba(255,255,255,.45),
      inset 0 -8px 18px rgba(144,20,77,.14);
    animation: button-bounce .72s cubic-bezier(.16,1.35,.38,1) both;
  }

  .like-input:checked + .like-control::before {
    animation: ring .8s ease-out both;
  }

  .like-input:checked + .like-control::after {
    animation: ring .95s .07s ease-out both;
  }

  .like-input:checked + .like-control .heart {
    animation: heart-crazy .82s cubic-bezier(.17,.8,.25,1.4) both;
  }

  .like-input:checked + .like-control .heart path { fill: #fff; }

  .particle {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: var(--size, 9px);
    height: var(--size, 9px);
    border-radius: 3px;
    opacity: 0;
    pointer-events: none;
    background: var(--color, #ffe078);
    box-shadow: 0 0 10px color-mix(in srgb, var(--color, #ffe078), transparent 30%);
  }

  .particle.round { border-radius: 50%; }
  .particle.heart-bit {
    width: 15px;
    height: 15px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .particle.heart-bit::before {
    content: "♥";
    position: absolute;
    color: var(--color, #ffe078);
    font-size: 17px;
    line-height: 1;
    text-shadow: 0 0 11px color-mix(in srgb, var(--color, #ffe078), transparent 25%);
  }

  .like-input:checked + .like-control .particle {
    animation: particle-launch .9s var(--delay, 0s) cubic-bezier(.16,.72,.25,1) both;
  }

  .p1  { --dx: -116px; --dy: -78px; --rot: -140deg; --color: #ffe078; --delay: 0s; }
  .p2  { --dx: -132px; --dy:  14px; --rot: 190deg;  --color: #8cecff; --delay: .03s; --size: 7px; }
  .p3  { --dx: -86px;  --dy: -130px; --rot: 240deg; --color: #c99aff; --delay: .06s; --size: 8px; }
  .p4  { --dx: -28px;  --dy: -144px; --rot: 70deg;   --color: #fff; --delay: .02s; --size: 6px; }
  .p5  { --dx: 62px;   --dy: -133px; --rot: 210deg;  --color: #ffe078; --delay: .08s; }
  .p6  { --dx: 124px;  --dy: -74px; --rot: 115deg;  --color: #8cecff; --delay: .04s; --size: 7px; }
  .p7  { --dx: 139px;  --dy: 18px; --rot: 260deg;   --color: #c99aff; --delay: .01s; --size: 8px; }
  .p8  { --dx: 95px;   --dy: 112px; --rot: 180deg;  --color: #ffe078; --delay: .07s; }
  .p9  { --dx: 28px;   --dy: 142px; --rot: 320deg;  --color: #8cecff; --delay: .05s; --size: 7px; }
  .p10 { --dx: -64px;  --dy: 128px; --rot: 145deg; --color: #ff9ec1; --delay: .09s; }
  .p11 { --dx: -133px; --dy: 92px; --rot: 250deg;  --color: #fff; --delay: .04s; --size: 6px; }
  .p12 { --dx: 78px;   --dy: -78px; --rot: -35deg; --color: #fff; --delay: .01s; }
  .p13 { --dx: -78px;  --dy: 76px; --rot: 30deg;   --color: #ff9ec1; --delay: .06s; }
  .p14 { --dx: 48px;   --dy: 62px; --rot: -120deg; --color: #c99aff; --delay: .02s; }

  .caption {
    min-height: 18px;
    margin-top: -1px;
    color: #e7a4bf;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  .caption .liked-text { display: none; }
  .like-input:checked ~ .caption .unliked-text { display: none; }
  .like-input:checked ~ .caption .liked-text { display: inline; color: #ff8eaf; }

  .social-proof {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 25px;
    padding: 10px 15px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 999px;
    color: #aaa4bb;
    background: rgba(255,255,255,.025);
    font-size: 12px;
  }

  .avatars { display: flex; padding-left: 3px; }
  .avatar {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    margin-left: -4px;
    border: 2px solid #211c2d;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    background: linear-gradient(135deg, #ffb46f, #e55c8b);
  }
  .avatar:nth-child(2) { background: linear-gradient(135deg, #73d8d1, #5872c5); }
  .avatar:nth-child(3) { background: linear-gradient(135deg, #d79fff, #7750cb); }

  .social-proof strong { color: #f4edf8; font-weight: 700; }

  .footer-note {
    margin-top: 22px;
    color: #706b7b;
    font-size: 11px;
    letter-spacing: .025em;
  }

  .footer-note span { color: #c19aff; }

  @keyframes ring {
    0% { transform: scale(.72); opacity: .75; border-color: rgba(255,126,170,.75); }
    100% { transform: scale(1.65); opacity: 0; border-color: rgba(255,126,170,0); }
  }

  @keyframes heart-crazy {
    0% { transform: scale(.3) rotate(-28deg); }
    24% { transform: scale(1.55) rotate(18deg); }
    42% { transform: scale(.78) rotate(-13deg); }
    61% { transform: scale(1.28) rotate(9deg); }
    78% { transform: scale(.94) rotate(-4deg); }
    100% { transform: scale(1) rotate(0); }
  }

  @keyframes button-bounce {
    0% { transform: scale(.72) rotate(-9deg); }
    35% { transform: scale(1.15) rotate(7deg); }
    62% { transform: scale(.95) rotate(-3deg); }
    82% { transform: scale(1.04) rotate(1deg); }
    100% { transform: scale(1) rotate(0); }
  }

  @keyframes particle-launch {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(.15) rotate(0);
    }
    18% { opacity: 1; }
    100% {
      opacity: 0;
      transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot));
    }
  }

  @keyframes orbit-drift {
    to { transform: rotate(360deg); }
  }

  @media (max-width: 520px) {
    body { padding: 16px 12px; }
    .card {
      min-height: 610px;
      padding: 32px 18px 25px;
      border-radius: 25px;
    }
    .stage { height: 265px; margin-top: 4px; }
    .like-control { width: 142px; height: 142px; }
    .orbit { width: 198px; height: 198px; }
    .orbit.orbit-inner { width: 154px; height: 154px; }
    .social-proof { margin-top: 20px; gap: 8px; font-size: 11px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
    }
  }
</style>
</head>
<body>
  <main class="card">
    <div class="eyebrow"><span class="dot"></span> A tiny moment of joy</div>
    <h1>Give it a <span>little love.</span></h1>
    <p class="intro">One little click. A frankly unreasonable amount of heart.</p>

    <div class="stage">
      <div class="orbit" aria-hidden="true"></div>
      <div class="orbit orbit-inner" aria-hidden="true"></div>

      <input class="like-input" type="checkbox" id="like" aria-label="Like this">
      <label class="like-control" for="like" aria-label="Like">
        <svg class="heart" viewBox="0 0 64 64" aria-hidden="true">
          <path d="M32 54S8 40 8 23.5C8 14.5 18.7 9.4 26 15.2c2.5 2 4.3 4.5 6 7.4 1.7-2.9 3.5-5.4 6-7.4 7.3-5.8 18-0.7 18 8.3C56 40 32 54 32 54Z"/>
        </svg>
        <span class="particle p1"></span><span class="particle p2 round"></span>
        <span class="particle p3"></span><span class="particle p4 round"></span>
        <span class="particle p5 heart-bit"></span><span class="particle p6"></span>
        <span class="particle p7 round"></span><span class="particle p8"></span>
        <span class="particle p9 round"></span><span class="particle p10 heart-bit"></span>
        <span class="particle p11"></span><span class="particle p12 round"></span>
        <span class="particle p13"></span><span class="particle p14 heart-bit"></span>
      </label>
    </div>

    <div class="caption">
      <span class="unliked-text">Tap the heart to like</span>
      <span class="liked-text">A little love, delivered!</span>
    </div>

    <div class="social-proof">
      <div class="avatars" aria-hidden="true">
        <span class="avatar">J</span><span class="avatar">M</span><span class="avatar">A</span>
      </div>
      <span><strong>2,418 people</strong> sent some love</span>
    </div>

    <div class="footer-note">Made with <span>♥</span> and absolutely no JavaScript</div>
  </main>
</body>
</html>

Reasoning trace (1,705 tokens)

**Creating interactive button design**

I want to set up a design using just HTML and CSS. I'm thinking of crafting a compelling button with animations, using a checkbox for interaction. It would be cool to have a clickable label that triggers explosive animations like hearts or particles. I want the button to be big and visually polished. I’ll use checked styles to create an exciting click effect—maybe have a heart emoji pop up with particle animations on toggle. I also need the design to be responsive with a dark gradient background.**Designing a pure CSS like button**

I'm aiming to create a central "like" button that's a giant interactive heart with a "LIKE" label and particles around it. The button needs some exciting animations! I'll set up a toggle input with a label that changes the text to "LIKED" using spans. An inline SVG heart might work well, and I could also use CSS for stars or other effects. I want surrounding dots and rays for added flair, with a dark background and a notice that highlights it's all done with pure CSS and no JavaScript.**Creating particle animations for a button**

I need to set fixed positions for particle spans using custom properties and keyframes, perhaps with CSS calc for dynamic layout. Each particle circle will have specific coordinates, animating from the center outwards. The starting position for the label and burst spans will be absolute, centered and scaled down. When the button is checked, the particle animations will activate. I'll use 12 decorative particles in different sizes and colors for a fun visual effect, ensuring the animation feels engaging and lively.**Designing UI Elements**

I’m working on labeling an internal icon for "LIKE" with a heart symbol. I’m thinking about the structure, maybe using a `.card` style with ambient orbits and decorations like stars. The typography system should rely solely on CSS without external fonts. I want to ensure accessibility by using a focus style for visual elements. The card dimensions and padding need to be just right for a clean user experience within a specific viewport.**Adding Decorative Particles**

I’m thinking about how to incorporate particles around the button for a more engaging design. The idea is to create a dynamic look that visually enhances user interaction. I’ll need to consider how these particles will animate and respond, adding a layer of excitement. It’s essential that they complement the button rather than distract from it, so I’ll keep that in mind as I design. Let's explore some options!