Exploding like buttonOne-line

GPT-6.1 Terra

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 23 s
Cost: $0.034
Output tokens: 6,823
Spent thinking: 1,370 tokens
Speed: 87 tok/s
Console errors: 0

First token after: 5.0 s
First visible text after: 32.7 s
Prompt tokens: 356
Code size: 14.9 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
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 · 512 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A little love — Pure CSS like button</title>
<style>
  :root {
    --ink: #282329;
    --muted: #91858a;
    --pink: #f34270;
    --paper: #fbf8f6;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--ink);
    background:
      radial-gradient(circle at 9% 38%, rgba(255, 210, 215, .34), transparent 24%),
      radial-gradient(circle at 91% 70%, rgba(255, 223, 213, .5), transparent 25%),
      var(--paper);
    font-family: "Arial", sans-serif;
  }

  .page {
    width: min(1100px, calc(100% - 64px));
    margin: 0 auto;
  }

  .topbar {
    height: 91px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eae3e1;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.7px;
  }

  .brand-mark {
    display: grid;
    place-items: center;
    width: 33px;
    height: 33px;
    border-radius: 11px;
    color: white;
    background: var(--pink);
    box-shadow: 0 5px 12px #f3427030;
  }

  .brand-mark svg { width: 17px; height: 17px; }

  .top-note {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a5999b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
  }

  .top-note::before {
    content: "";
    width: 7px;
    height: 7px;
    background: #f17d91;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #fce6e8;
  }

  .intro {
    padding: 45px 0 30px;
    text-align: center;
  }

  .eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #d0707e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .eyebrow::before, .eyebrow::after {
    content: "";
    width: 24px;
    height: 1px;
    background: #eac4c8;
  }

  h1 {
    margin: 15px 0 9px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(36px, 4.5vw, 54px);
    font-weight: 400;
    letter-spacing: -2.4px;
    line-height: 1.08;
  }

  h1 em {
    color: #ef5577;
    font-weight: 400;
  }

  .intro p {
    margin: 0;
    color: #9d9092;
    font-size: 13px;
    letter-spacing: .1px;
  }

  .card {
    max-width: 850px;
    margin: 0 auto;
    padding: 0 14px 14px;
    background: #fff;
    border: 1px solid #eee7e5;
    border-radius: 23px;
    box-shadow: 0 22px 65px rgba(79, 48, 52, .08), 0 4px 12px rgba(79, 48, 52, .035);
  }

  .card-top {
    height: 53px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #a99c9e;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
  }

  .card-title { display: flex; align-items: center; gap: 9px; }
  .card-title::before {
    content: "✳";
    color: #ed8da0;
    font-size: 15px;
  }
  .card-number { color: #c8babc; }

  .stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 318px;
    padding: 35px 18px 29px;
    border: 1px solid #fae9e7;
    border-radius: 15px;
    background-color: #fff8f6;
    background-image: radial-gradient(#efdeda 1px, transparent 1px);
    background-size: 20px 20px;
    text-align: center;
    isolation: isolate;
  }

  .stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(ellipse at center, #fffaf9 0%, rgba(255, 250, 249, .92) 35%, transparent 76%);
  }

  .small-heart {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 13px;
    color: #ed7290;
    background: #ffeaed;
    border: 1px solid #ffdee4;
    border-radius: 12px;
    transform: rotate(-8deg);
  }
  .small-heart svg { width: 17px; height: 17px; }

  .stage h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 400;
    letter-spacing: -.5px;
  }

  .stage-copy {
    margin: 8px 0 25px;
    color: #a29396;
    font-size: 12px;
    line-height: 1.5;
  }

  .like-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .like-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-width: 211px;
    height: 61px;
    padding: 0 19px;
    border-radius: 100px;
    background: #282329;
    color: white;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 8px 0 #ded2d0, 0 13px 25px rgba(76, 45, 51, .16);
    transition: background .3s, box-shadow .3s, transform .2s;
    -webkit-tap-highlight-color: transparent;
  }

  .like-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 11px 0 #ded2d0, 0 17px 28px rgba(76, 45, 51, .18);
  }

  .like-button:active { transform: translateY(4px) scale(.97); }
  .like-toggle:focus-visible + .like-button { outline: 3px solid #f34270; outline-offset: 7px; }

  .heart-icon {
    position: relative;
    width: 23px;
    height: 23px;
    flex: none;
  }
  .heart-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: fill .2s;
  }

  .button-word {
    min-width: 38px;
    text-align: left;
    font-size: 14px;
    font-weight: 800;
  }
  .button-word::after { content: "Like"; }

  .count {
    padding-left: 13px;
    border-left: 1px solid rgba(255,255,255,.25);
    font-size: 12px;
    font-weight: 700;
    color: rgba(255,255,255,.8);
  }
  .count::after { content: "2,418"; }

  .feedback {
    min-height: 13px;
    margin-top: 22px;
    color: #b8a6a8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .45px;
  }
  .feedback::after { content: "GO ON, GIVE IT A CLICK"; }

  .like-toggle:checked + .like-button {
    background: #f34270;
    box-shadow: 0 8px 0 #f9c2cd, 0 14px 28px rgba(243, 66, 112, .24);
    animation: button-pop .8s cubic-bezier(.2, .8, .2, 1);
  }
  .like-toggle:checked + .like-button .heart-icon {
    animation: heart-pop .9s cubic-bezier(.18, .9, .25, 1.5);
  }
  .like-toggle:checked + .like-button .heart-icon svg { fill: white; }
  .like-toggle:checked + .like-button .button-word::after { content: "Liked"; }
  .like-toggle:checked + .like-button .count::after { content: "2,419"; }
  .like-toggle:checked ~ .feedback { color: #ed7890; }
  .like-toggle:checked ~ .feedback::after { content: "THAT FELT GOOD, DIDN’T IT?"; }

  .burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .ring {
    position: absolute;
    left: -25px;
    top: -25px;
    width: 50px;
    height: 50px;
    border: 3px solid #ff7291;
    border-radius: 50%;
    opacity: 0;
  }

  .ring.two { border-color: #ffbd70; }
  .like-toggle:checked + .like-button .ring { animation: ring 1.05s ease-out forwards; }
  .like-toggle:checked + .like-button .ring.two { animation-delay: .12s; }

  .particle {
    position: absolute;
    left: -9px;
    top: -12px;
    width: 18px;
    color: var(--color, #f34270);
    font-size: var(--size, 20px);
    line-height: 1;
    opacity: 0;
    text-shadow: 0 3px 8px rgba(243, 66, 112, .12);
  }

  .like-toggle:checked + .like-button .particle {
    animation: explode 1.45s cubic-bezier(.12, .65, .25, 1) var(--delay, 0s) forwards;
  }

  @keyframes explode {
    0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(.1); }
    12% { opacity: 1; }
    55% { opacity: 1; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.2); }
    100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 40px)) rotate(var(--r)) scale(.55); }
  }
  @keyframes ring {
    0% { opacity: .9; transform: scale(.3); }
    100% { opacity: 0; transform: scale(5); border-width: 1px; }
  }
  @keyframes heart-pop {
    0% { transform: scale(1); }
    25% { transform: scale(.5) rotate(-20deg); }
    55% { transform: scale(1.7) rotate(12deg); }
    75% { transform: scale(.85) rotate(-5deg); }
    100% { transform: scale(1) rotate(0); }
  }
  @keyframes button-pop {
    0%, 100% { transform: scale(1); }
    20% { transform: scale(.88); }
    48% { transform: scale(1.13) rotate(-2deg); }
    70% { transform: scale(.97) rotate(1deg); }
  }

  .deco {
    position: absolute;
    pointer-events: none;
    color: #f5c6cb;
    font-family: Georgia, serif;
  }
  .deco.a { top: 55px; left: 12%; font-size: 21px; transform: rotate(-16deg); }
  .deco.b { bottom: 59px; left: 18%; font-size: 15px; color: #f5c9ae; }
  .deco.c { top: 70px; right: 14%; font-size: 25px; color: #f8d1b4; }
  .deco.d { bottom: 54px; right: 16%; font-size: 20px; transform: rotate(15deg); }

  .card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px 6px;
    color: #ae9fa1;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .45px;
  }

  .card-bottom span:last-child { color: #d3b5b9; }
  .card-bottom b { color: #ed8ca0; font-size: 13px; margin-right: 5px; }

  .footer {
    max-width: 850px;
    margin: 23px auto 28px;
    display: flex;
    justify-content: space-between;
    color: #b5aaab;
    font-size: 10px;
    letter-spacing: .3px;
  }
  .footer strong { color: #d18c99; font-weight: 700; }

  @media (max-width: 600px) {
    .page { width: calc(100% - 32px); }
    .topbar { height: 72px; }
    .top-note { font-size: 0; }
    .intro { padding: 43px 0 28px; }
    h1 { font-size: 38px; letter-spacing: -1.8px; }
    .intro p { font-size: 12px; }
    .card { padding: 0 9px 10px; border-radius: 19px; }
    .card-top { height: 48px; font-size: 8px; }
    .stage { min-height: 330px; }
    .stage h2 { font-size: 22px; }
    .deco.a { left: 7%; }
    .deco.c { right: 7%; }
    .deco.b { left: 9%; }
    .deco.d { right: 9%; }
    .card-bottom { font-size: 9px; padding-left: 5px; padding-right: 5px; }
    .footer { font-size: 9px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .like-toggle:checked + .like-button,
    .like-toggle:checked + .like-button .heart-icon,
    .like-toggle:checked + .like-button .ring,
    .like-toggle:checked + .like-button .particle { animation-duration: .01ms; }
  }
</style>
</head>
<body>
  <div class="page">
    <header class="topbar">
      <div class="brand">
        <span class="brand-mark">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M12 21s-8.5-5.2-8.5-11.1C3.5 6.9 5.4 5 8.1 5c1.7 0 3.1.9 3.9 2.2C12.8 5.9 14.2 5 15.9 5c2.7 0 4.6 1.9 4.6 4.9C20.5 15.8 12 21 12 21Z"/></svg>
        </span>
        goodthings<span style="color:#f34270;margin-left:-10px">.</span>
      </div>
      <div class="top-note">A LITTLE JOY, ON DEMAND</div>
    </header>

    <main>
      <div class="intro">
        <div class="eyebrow">A tiny interaction experiment</div>
        <h1>A little love goes a <em>long way.</em></h1>
        <p>A small button with a lot of feelings.</p>
      </div>

      <section class="card" aria-label="Like button experiment">
        <div class="card-top">
          <div class="card-title">THE LIKE EXPERIMENT</div>
          <div class="card-number">NO. 001 &nbsp; / &nbsp; PURE CSS</div>
        </div>

        <div class="stage">
          <span class="deco a" aria-hidden="true">♡</span>
          <span class="deco b" aria-hidden="true">✳</span>
          <span class="deco c" aria-hidden="true">✧</span>
          <span class="deco d" aria-hidden="true">♡</span>

          <div class="small-heart" aria-hidden="true">
            <svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 21s-8.5-5.2-8.5-11.1C3.5 6.9 5.4 5 8.1 5c1.7 0 3.1.9 3.9 2.2C12.8 5.9 14.2 5 15.9 5c2.7 0 4.6 1.9 4.6 4.9C20.5 15.8 12 21 12 21Z"/></svg>
          </div>
          <h2>Give this moment a little love.</h2>
          <p class="stage-copy">One click. A wildly disproportionate celebration.</p>

          <input class="like-toggle" type="checkbox" id="like" aria-label="Like this moment">
          <label class="like-button" for="like">
            <span class="burst" aria-hidden="true">
              <span class="ring"></span><span class="ring two"></span>
              <span class="particle" style="--x:-160px;--y:-95px;--r:-35deg;--color:#f34270;--size:26px">♥</span>
              <span class="particle" style="--x:-110px;--y:-140px;--r:35deg;--color:#ffae5d;--size:20px;--delay:.03s">✦</span>
              <span class="particle" style="--x:-55px;--y:-155px;--r:-20deg;--color:#f67396;--size:18px;--delay:.08s">♥</span>
              <span class="particle" style="--x:10px;--y:-165px;--r:30deg;--color:#ffb05f;--size:25px">✳</span>
              <span class="particle" style="--x:72px;--y:-145px;--r:20deg;--color:#ee4d79;--size:26px;--delay:.04s">♥</span>
              <span class="particle" style="--x:135px;--y:-125px;--r:45deg;--color:#e9a0ba;--size:20px">✦</span>
              <span class="particle" style="--x:180px;--y:-72px;--r:35deg;--color:#ff966f;--size:23px;--delay:.06s">♥</span>
              <span class="particle" style="--x:190px;--y:-12px;--r:90deg;--color:#efc46d;--size:18px">✳</span>
              <span class="particle" style="--x:167px;--y:55px;--r:35deg;--color:#f34270;--size:20px;--delay:.07s">♥</span>
              <span class="particle" style="--x:112px;--y:90px;--r:-30deg;--color:#f5a7b3;--size:20px">✦</span>
              <span class="particle" style="--x:48px;--y:105px;--r:30deg;--color:#ffae5d;--size:17px;--delay:.03s">♥</span>
              <span class="particle" style="--x:-26px;--y:110px;--r:-45deg;--color:#f34270;--size:21px">✳</span>
              <span class="particle" style="--x:-96px;--y:95px;--r:30deg;--color:#f1829c;--size:25px;--delay:.04s">♥</span>
              <span class="particle" style="--x:-156px;--y:55px;--r:-30deg;--color:#ffc66e;--size:22px">✦</span>
              <span class="particle" style="--x:-190px;--y:-8px;--r:35deg;--color:#f38ba5;--size:18px;--delay:.07s">♥</span>
              <span class="particle" style="--x:-185px;--y:-55px;--r:80deg;--color:#edafc1;--size:16px">✳</span>
            </span>
            <span class="heart-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 20.5S3.5 15.4 3.5 9.8C3.5 6.9 5.4 5 8 5c1.7 0 3.1.9 4 2.3C12.9 5.9 14.3 5 16 5c2.6 0 4.5 1.9 4.5 4.8 0 5.6-8.5 10.7-8.5 10.7Z"/></svg>
            </span>
            <span class="button-word" aria-hidden="true"></span>
            <span class="count" aria-hidden="true"></span>
          </label>
          <div class="feedback" aria-live="polite"></div>
        </div>

        <div class="card-bottom">
          <span><b>♥</b> MADE FOR THE LITTLE MOMENTS</span>
          <span>CLICK AGAIN TO RESET ↗</span>
        </div>
      </section>
    </main>

    <footer class="footer">
      <span>A little delight for your day.</span>
      <span>Made with <strong>♥</strong> and CSS</span>
    </footer>
  </div>
</body>
</html>

Reasoning trace (1,370 tokens)

**Designing CSS Animations**

I need to create a compelling HTML and CSS layout without using JavaScript, focusing on a button featuring pure CSS animations. I’ll design a visually interesting central panel, possibly with a dark luxury feel and light background. The user wants a crazy animation for a button using CSS checkbox toggles, like fireworks and confetti upon clicking. The layout will include a large heading, “A little love goes a long way,” with a heart icon, and interactive animations that respond to user interactions.**Creating a Heart-Themed Design**

I'm designing a layout with absolute elements positioned around a heart, possibly using inline SVG for the heart icon path. The button will be a pill shape with dimensions 220x76, featuring a changing gradient and a red heart icon. I’ll ensure the screenshot looks captivating, featuring a header with “LOVE LAB” branding and “NO. 01 / MICRO-INTERACTION.” The central content will include a prominent white card, subtle shadows, and elements like sparkle badges along with interactive hearts, all while clearly showing user actions without JavaScript.**Implementing CSS Animations**

I’m focusing on using CSS with a visually hidden checkbox and a label that highlights when focused. The button will include burst animations that don’t obstruct the view. I’ll create particle bursts as span elements, using different text icons like hearts and stars, setting up CSS variables for positioning and transformations. Each particle will animate when checked for 1.2 seconds, complete with delays. Additionally, I’ll add rings using pseudo-elements and animate the heart icon with a popping effect, while keeping everything visually anchored on the button.**Calculating layout dimensions**

I'm working with CSS selectors based on the hierarchy, like using .like-toggle + .like-button and .feedback. I need to count alternatives through CSS pseudoelements. When calculating heights, I consider header, hero margins, and padding. Specifically, at 800 vertical, I check the header and hero dimensions to ensure everything fits. It’s about creating an effective layout while keeping things structured, including background ornaments that aren't interactive and centering the heading correctly. Let’s formulate this!