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 7 s
Cost: $0.028
Output tokens: 5,587
Spent thinking: 997 tokens
Speed: 90.4 tok/s
Console errors: 0

First token after: 5.3 s
First visible text after: 24.2 s
Prompt tokens: 356
Code size: 13.0 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
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 · 480 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: #ff527a;
    --ink: #f8f4f4;
    --muted: #93909e;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    background:
      radial-gradient(ellipse at 50% 46%, rgba(107, 40, 78, .19), transparent 42%),
      #111016;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: hidden;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .17;
    background-image: radial-gradient(#aaa 0.7px, transparent 0.7px);
    background-size: 24px 24px;
    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
  }

  .page {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 28px 6%;
  }

  .topbar, .footer {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
  }

  .brand-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: #fff;
    background: var(--pink);
    font-size: 19px;
    line-height: 1;
    box-shadow: 0 4px 20px #ff527a44;
  }

  .top-note {
    color: #98939f;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .15em;
  }

  .top-note span {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    border-radius: 50%;
    background: #a7e5bc;
    vertical-align: 2px;
    box-shadow: 0 0 10px #a7e5bc;
  }

  main {
    width: 100%;
    max-width: 760px;
    margin: auto;
    padding: 38px 0 32px;
    text-align: center;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 17px;
    color: #ff8aa2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .19em;
  }

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

  h1 {
    margin: 0;
    font-size: clamp(40px, 6.2vw, 68px);
    line-height: 1.04;
    letter-spacing: -.055em;
    font-weight: 800;
  }

  h1 em {
    color: #ff718f;
    font-family: Georgia, serif;
    font-weight: 400;
    letter-spacing: -.06em;
  }

  .subtitle {
    margin: 16px 0 28px;
    color: #aaa4af;
    font-size: 14px;
    line-height: 1.6;
  }

  .stage {
    position: relative;
    display: flex;
    min-height: 290px;
    align-items: center;
    justify-content: center;
    border: 1px solid #39313e;
    border-radius: 24px;
    background:
      radial-gradient(ellipse at center, #37242f 0%, #211c27 43%, #1a1820 80%);
    box-shadow: 0 25px 75px #0005, inset 0 1px #ffffff08;
  }

  .stage::before, .stage::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 250px;
    height: 250px;
    border: 1px solid #ffb4c017;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .stage::after {
    width: 355px;
    height: 195px;
    border-style: dashed;
    border-color: #ffb4c017;
    transform: translate(-50%, -50%) rotate(-16deg);
  }

  .stage-label {
    position: absolute;
    top: 22px;
    left: 25px;
    color: #8b7f8c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
  }

  .stage-number {
    position: absolute;
    top: 22px;
    right: 25px;
    color: #8b7f8c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
  }

  .spark {
    position: absolute;
    color: #ff809a;
    font-size: 20px;
    animation: twinkle 3s ease-in-out infinite alternate;
    pointer-events: none;
  }

  .spark.one { left: 21%; top: 35%; }
  .spark.two { right: 19%; top: 28%; font-size: 13px; animation-delay: -.8s; color: #ffc777; }
  .spark.three { right: 24%; bottom: 26%; font-size: 17px; animation-delay: -1.5s; }
  .spark.four { left: 27%; bottom: 23%; font-size: 10px; color: #c2a6ff; animation-delay: -2s; }

  @keyframes twinkle {
    from { opacity: .35; transform: scale(.8) rotate(-15deg); }
    to { opacity: 1; transform: scale(1.15) rotate(15deg); }
  }

  .action { position: relative; z-index: 2; }

  .action input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .like-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 276px;
    height: 80px;
    padding: 9px 12px 9px 10px;
    border: 1px solid #ff9aab;
    border-radius: 20px;
    background: linear-gradient(135deg, #ff6b88, #f74670);
    color: white;
    cursor: pointer;
    box-shadow: 0 9px 0 #a72d4d, 0 17px 36px #ff416149, inset 0 1px #ffffff66;
    text-align: left;
    user-select: none;
    transition: transform .2s, box-shadow .2s, background .3s;
    -webkit-tap-highlight-color: transparent;
  }

  .like-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 0 #a72d4d, 0 22px 42px #ff41615c, inset 0 1px #ffffff66;
  }

  .like-button:active {
    transform: translateY(6px);
    box-shadow: 0 3px 0 #a72d4d, 0 8px 20px #ff416149;
  }

  input:focus-visible + .like-button {
    outline: 3px solid white;
    outline-offset: 7px;
  }

  .heart-box {
    position: relative;
    z-index: 3;
    display: grid;
    flex: 0 0 59px;
    width: 59px;
    height: 59px;
    place-items: center;
    border-radius: 14px;
    background: #ffffff25;
    border: 1px solid #ffffff2e;
  }

  .heart {
    width: 32px;
    height: 32px;
    fill: white;
    filter: drop-shadow(0 2px 2px #c12e5155);
  }

  .button-copy { flex: 1; padding-left: 14px; }
  .button-copy strong { display: block; font-size: 16px; letter-spacing: -.02em; }
  .button-copy small { display: block; margin-top: 3px; color: #ffe1e6; font-size: 10px; font-weight: 650; }
  .liked-copy { display: none; }

  .count {
    min-width: 44px;
    padding: 8px 7px;
    border-radius: 10px;
    background: #a3234438;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
  }

  .count::after { content: "128"; }

  .particle, .ring {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    z-index: 4;
    left: 40px;
    top: 50%;
  }

  .particle {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--color);
  }

  .particle:nth-of-type(3n) { border-radius: 50%; width: 7px; height: 7px; }
  .particle:nth-of-type(4n) { width: 5px; height: 14px; }

  .ring {
    width: 30px;
    height: 30px;
    border: 3px solid #ffc5d0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  .ring.second { border-color: #ffcc73; }

  input:checked + .like-button {
    background: linear-gradient(135deg, #fa6089, #ed315f);
    animation: button-dance .8s cubic-bezier(.2,.8,.2,1);
  }

  input:checked + .like-button .heart {
    animation: heart-pop 1s cubic-bezier(.17,.89,.32,1.3);
  }

  input:checked + .like-button .unliked-copy { display: none; }
  input:checked + .like-button .liked-copy { display: block; }
  input:checked + .like-button .count::after { content: "129"; }
  input:checked + .like-button .particle { animation: confetti 1.15s cubic-bezier(.12,.7,.2,1) both; }
  input:checked + .like-button .ring { animation: ripple .75s ease-out both; }
  input:checked + .like-button .ring.second { animation-delay: .13s; }

  @keyframes heart-pop {
    0% { transform: scale(1) rotate(0); }
    20% { transform: scale(.6) rotate(-20deg); }
    45% { transform: scale(1.8) rotate(15deg); }
    65% { transform: scale(.9) rotate(-9deg); }
    82% { transform: scale(1.2) rotate(4deg); }
    100% { transform: scale(1) rotate(0); }
  }

  @keyframes button-dance {
    0%, 100% { transform: rotate(0) scale(1); }
    20% { transform: rotate(-3deg) scale(.96); }
    40% { transform: rotate(3deg) scale(1.05); }
    60% { transform: rotate(-2deg) scale(1); }
    80% { transform: rotate(1deg) scale(1.01); }
  }

  @keyframes confetti {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(.3) rotate(0); }
    20% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(var(--r)); }
  }

  @keyframes ripple {
    0% { opacity: .9; transform: translate(-50%, -50%) scale(.5); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(5); }
  }

  .stage-bottom {
    position: absolute;
    bottom: 21px;
    left: 0;
    right: 0;
    color: #90818f;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
  }

  .instruction {
    margin: 22px 0 0;
    color: #b4adb8;
    font-size: 12px;
  }

  .instruction b { color: #f2e8ed; font-weight: 650; }
  .instruction .dot { color: #ff718f; padding: 0 8px; }

  .footer {
    color: #77717d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
  }

  .footer-heart { color: #ff718f; }

  @media (max-width: 520px) {
    .page { padding: 22px 20px; }
    .top-note { font-size: 9px; }
    main { padding: 48px 0 38px; }
    h1 { font-size: 42px; }
    .subtitle { max-width: 290px; margin: 15px auto 26px; }
    .stage { min-height: 270px; }
    .stage::after { width: 85%; }
    .spark.one { left: 8%; }
    .spark.two { right: 10%; }
    .spark.three { right: 10%; }
    .spark.four { left: 12%; }
    .footer { font-size: 9px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .spark { animation: none; }
  }
</style>
</head>
<body>
  <div class="page">
    <header class="topbar">
      <div class="brand"><span class="brand-icon">✳</span> LITTLE LOVE</div>
      <div class="top-note"><span></span>CSS ONLY</div>
    </header>

    <main>
      <div class="eyebrow">A TINY INTERACTION</div>
      <h1>Go on, show<br>some <em>love.</em></h1>
      <p class="subtitle">A little click can make a big impression.</p>

      <section class="stage" aria-label="Like button demonstration">
        <div class="stage-label">THE FEEL-GOOD BUTTON</div>
        <div class="stage-number">01 / 01</div>
        <span class="spark one" aria-hidden="true">✦</span>
        <span class="spark two" aria-hidden="true">✦</span>
        <span class="spark three" aria-hidden="true">✧</span>
        <span class="spark four" aria-hidden="true">✦</span>

        <div class="action">
          <input type="checkbox" id="like" aria-label="Like this">
          <label class="like-button" for="like">
            <span class="heart-box">
              <svg class="heart" viewBox="0 0 32 32" aria-hidden="true"><path d="M16 28.2 13.9 26.3C6.5 19.7 2 15.6 2 10.6 2 6.5 5.2 3.4 9.2 3.4c2.3 0 4.7 1.1 6.8 3.5 2.1-2.4 4.5-3.5 6.8-3.5 4 0 7.2 3.1 7.2 7.2 0 5-4.5 9.1-11.9 15.7L16 28.2Z"/></svg>
            </span>
            <span class="button-copy">
              <span class="unliked-copy"><strong>Like this</strong><small>Go on, make our day</small></span>
              <span class="liked-copy"><strong>Loved it!</strong><small>You're pretty great</small></span>
            </span>
            <span class="count" aria-hidden="true"></span>
            <span class="ring"></span><span class="ring second"></span>
            <span class="particle" style="--x:-115px;--y:-85px;--r:230deg;--color:#ffd56f"></span>
            <span class="particle" style="--x:-75px;--y:-125px;--r:-190deg;--color:#ff83aa"></span>
            <span class="particle" style="--x:-23px;--y:-145px;--r:200deg;--color:#b8a1ff"></span>
            <span class="particle" style="--x:35px;--y:-130px;--r:-260deg;--color:#ffcf76"></span>
            <span class="particle" style="--x:90px;--y:-105px;--r:170deg;--color:#ff9caf"></span>
            <span class="particle" style="--x:140px;--y:-70px;--r:-200deg;--color:#b6ecce"></span>
            <span class="particle" style="--x:175px;--y:-25px;--r:300deg;--color:#ffd878"></span>
            <span class="particle" style="--x:165px;--y:55px;--r:-240deg;--color:#d1adff"></span>
            <span class="particle" style="--x:120px;--y:100px;--r:260deg;--color:#ff96ad"></span>
            <span class="particle" style="--x:60px;--y:125px;--r:-190deg;--color:#a9e9cc"></span>
            <span class="particle" style="--x:0px;--y:130px;--r:210deg;--color:#ffd878"></span>
            <span class="particle" style="--x:-65px;--y:115px;--r:-300deg;--color:#ff86a3"></span>
            <span class="particle" style="--x:-115px;--y:80px;--r:220deg;--color:#c3a9ff"></span>
            <span class="particle" style="--x:-145px;--y:15px;--r:-170deg;--color:#ffe180"></span>
            <span class="particle" style="--x:-145px;--y:-35px;--r:180deg;--color:#a9e9cc"></span>
          </label>
        </div>
        <div class="stage-bottom">A LITTLE LOVE GOES A LONG WAY</div>
      </section>

      <p class="instruction"><b>Give it a click</b><span class="dot">✳</span>Click again to reset</p>
    </main>

    <footer class="footer">
      <span>MADE FOR THE LITTLE MOMENTS</span>
      <span>SPREAD THE <span class="footer-heart">♥</span></span>
    </footer>
  </div>
</body>
</html>

Reasoning trace (997 tokens)

**Designing interactive animations**

I’m working on a pure CSS checkbox label with engaging animations that feel polished. The user wants a like button. I envision a creative design with a warm ivory background featuring a central card, dark navy button, and a coral heart with colorful confetti effects. For the unclicked state, I aim to make the heart a prominent icon. When checked, I want an exciting animation — think enlarging heart, particles, background glow, and text changes, all using only CSS keyframes.**Creating a vibrant card design**

I'm conceptualizing a card layout with the phrase, "A little love goes a long way," centered and highlighted in pink. I want to make a vibrant button featuring a huge heart icon and a LIKE THIS label, along with a circular count. The background will be a dark color with subtle textures, and I plan to incorporate floating stars. For the button, I’ll have a fun animation with exploding confetti upon clicking, ensuring it's placed nicely to create an engaging visual experience.**Designing the button's aesthetic**

I'm envisioning a button where the heart fill is white initially and turns red when checked. The label will have a coral gradient for its checked state. I want to create an explosion effect centered on the button, with rotating and color changes, featuring a large heart popping with shadows. I'll also design rings surrounding the heart, and instead of emojis, I prefer a decorative orbit around the button. It's important to include clear instructions like "CLICK THE BUTTON" and "Made with CSS only" with a small number indicator.**Designing the Button**

I'm thinking about creating a centered design for the button with the heading "Good things deserve a little love." I'll use a creamy light background with pink/red accents and a darker backdrop for contrast. It sounds like the user wants a simple button without JavaScript, so I’ll make sure it has a vivid pink color with a heart-shaped border. It will have an animated feel when hovered over, and I’ll ensure it’s accessible for everyone. The main focus is on making the button really stand out and functional.**Styling the Button and Layout**

I'm thinking about styling the labels, using a bright background color for unchecked states and bold neon for checked ones. The icon container should be square with a heart design and a big button. I want the main card to have a dark tint, with dimensions of 680 by 320, and the label centered. There will be decorative elements like halos and floating symbols, with subtle ambient animations. I'll ensure the CSS is responsive for different screen sizes and incorporate particle animations and SVG hearts. Everything will be designed to create an engaging user experience.**Designing the Badges and Animation**

I'm considering adding little badges around the "GOOD VIBES" button, including heart icons for added flair. I’m thinking about using particles with various shapes that flicker continuously. The main card should be centered and sized at 660 by 300, along with a header and footer. To keep it simple, I won’t use JavaScript. Instead, I want to show initial interaction with mini floating symbols and maybe a subtle shimmer effect during the first paint. This should create a lively and engaging experience!