Exploding like buttonOne-line

GPT-6.1 Sol

by OpenAIreasoning defaultClean

Open in new window

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

How it went

Total time: 1 min 19 s
Cost: $0.050
Output tokens: 4,930
Spent thinking: 513 tokens
Speed: 71.7 tok/s
Console errors: 0

First token after: 10.0 s
First visible text after: 23.1 s
Prompt tokens: 356
Code size: 12.4 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-sol
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 · 156 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love at first click — CSS experiment</title>
<style>
@import url("");
:root{--ink:#27212c;--pink:#ff3c79;--paper:#faf8f5;--muted:#918991}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23988c89' opacity='.2' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.page{max-width:1100px;padding:0 32px;margin:auto}
header{height:99px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e4dfe0}
.brand{font-size:20px;font-weight:800;letter-spacing:-.8px;display:flex;gap:10px;align-items:center}
.brand b{color:var(--pink);font-size:35px;line-height:1}
.badge{font-family:monospace;font-size:11px;letter-spacing:1px;border:1px solid #ded8dc;border-radius:30px;padding:10px 14px;display:flex;align-items:center;gap:8px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink)}
.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:40px 0 31px;gap:25px}
.eyebrow{font-family:monospace;font-size:10px;letter-spacing:2px;color:#92848b;margin-bottom:15px}
h1{font-size:clamp(38px,5vw,62px);letter-spacing:-3px;line-height:1.04;margin:0;font-weight:800}
h1 span{color:var(--pink)}
.description{font-size:14px;line-height:1.8;color:#827780;max-width:242px;margin:0 0 3px}
.description strong{color:var(--ink);font-weight:500}
.playground{position:relative;height:360px;border:1px solid #e7dce2;border-radius:18px;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#ffe5ee 0%,#fff1f5 43%,#fffafa 78%);isolation:isolate}
.playground::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#d9bdc9 .7px,transparent .7px);background-size:18px 18px;opacity:.42;mask-image:linear-gradient(90deg,#000,transparent 37%,transparent 63%,#000)}
.corner{position:absolute;font-family:monospace;font-size:9px;letter-spacing:1.1px;color:#ad939f;z-index:2}
.tl{top:23px;left:25px;display:flex;align-items:center;gap:8px}
.tl::before{content:"";height:5px;width:5px;background:#f5a3bf;border-radius:50%}
.tr{top:23px;right:25px}
.bl{bottom:22px;left:25px}
.br{bottom:22px;right:25px}
#love{position:absolute;width:1px;height:1px;opacity:0}
.center{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:280px;height:90px;z-index:3}
.like{position:relative;display:flex;width:280px;height:88px;align-items:center;justify-content:center;gap:18px;cursor:pointer;user-select:none;border-radius:24px;background:var(--ink);color:#fff;box-shadow:0 8px 0 #160e1c,0 18px 32px #6a204d22;transition:background .25s,box-shadow .25s,scale .25s;z-index:4;-webkit-tap-highlight-color:transparent}
.like:hover{scale:1.035;background:#372b3e}
.like:active{scale:.96}
#love:focus-visible ~ .center .like{outline:3px solid var(--pink);outline-offset:10px}
.heart-box{width:29px;height:32px;position:relative;display:grid;place-items:center;flex:none}
.heart{position:relative;width:18px;height:18px;background:#ff76a3;transform:rotate(-45deg);top:3px}
.heart::before,.heart::after{content:"";position:absolute;background:inherit;border-radius:50%;width:18px;height:18px}
.heart::before{top:-9px;left:0}
.heart::after{left:9px;top:0}
.words{font-size:21px;letter-spacing:-.6px;font-weight:700;width:85px;white-space:nowrap}
.on{display:none}
.count{border-left:1px solid #ffffff28;padding-left:19px;font-size:15px;color:#c4b9c9;font-variant-numeric:tabular-nums}
.note{position:absolute;top:calc(48% + 82px);left:50%;transform:translateX(-50%) rotate(-4deg);color:#b67a90;font-size:15px;font-family:Georgia,serif;font-style:italic;white-space:nowrap;transition:opacity .2s}
.note::after{content:"⤴";display:inline-block;font-size:29px;position:absolute;right:-31px;top:-14px;transform:rotate(-13deg)}
.ring{position:absolute;border:1px solid #edccda;border-radius:50%;width:280px;height:280px;left:50%;top:48%;transform:translate(-50%,-50%);pointer-events:none}
.ring.two{width:390px;height:390px;opacity:.5;border-style:dashed}
.decor{position:absolute;color:#e7b4c7;font-size:23px;line-height:1;pointer-events:none}
.d1{left:25%;top:29%;transform:rotate(15deg)}
.d2{right:24%;bottom:24%;font-size:17px}
.d3{left:32%;bottom:22%;font-size:8px}
.d4{right:32%;top:21%;font-size:8px}
.burst{position:absolute;left:50%;top:48%;width:1px;height:1px;pointer-events:none;z-index:2}
.particle{position:absolute;left:0;top:0;width:9px;height:16px;border-radius:2px;background:var(--c);opacity:0;transform:translate(-50%,-50%)}
.particle.round{border-radius:50%;height:9px}
.particle.star{background:none;width:auto;height:auto;font-size:28px;color:var(--c)}
.shockwave{position:absolute;left:50%;top:48%;width:90px;height:90px;border:3px solid #ff4b85;border-radius:50%;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}
.cheer{position:absolute;top:64px;left:0;right:0;text-align:center;font-family:monospace;color:#e52e6d;font-size:12px;font-weight:700;letter-spacing:3px;opacity:0;transform:translateY(20px)}
#love:checked ~ .center .like{background:var(--pink);box-shadow:0 8px 0 #c52156,0 18px 42px #ff3c7945;animation:button-party .9s both}
#love:checked ~ .center .heart{background:#fff}
#love:checked ~ .center .heart-box{animation:heart-party 1s both}
#love:checked ~ .center .count{color:#ffe2ec}
#love:checked ~ .center .off{display:none}
#love:checked ~ .center .on{display:inline}
#love:checked ~ .note{opacity:0}
#love:checked ~ .cheer{animation:cheer .75s .15s both}
#love:checked ~ .shockwave{animation:wave .9s .05s ease-out both}
#love:checked ~ .shockwave.second{animation-delay:.18s;border-width:1px}
#love:checked ~ .burst .particle{animation:explode 1.35s cubic-bezier(.12,.65,.25,1) both;animation-delay:var(--delay,0s)}
#love:checked ~ .ring{border-color:#f4a3bf;transition:border-color .5s}
#love:checked ~ .decor{animation:twinkle 1.5s ease-in-out infinite alternate}
@keyframes button-party{0%{transform:scale(1)}15%{transform:scale(.83,.9) rotate(-6deg)}35%{transform:scale(1.18,1.12) rotate(7deg)}52%{transform:scale(.96) rotate(-5deg)}70%{transform:scale(1.04) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
@keyframes heart-party{0%,100%{transform:scale(1)}25%{transform:translateY(-35px) scale(1.7) rotate(-20deg)}50%{transform:translateY(5px) scale(.85) rotate(15deg)}75%{transform:scale(1.15)}}
@keyframes explode{0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0)}12%{opacity:1}65%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.6) rotate(var(--r,220deg))}}
@keyframes wave{0%{opacity:.8;transform:translate(-50%,-50%) scale(.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(5.5)}}
@keyframes cheer{0%{opacity:0;transform:translateY(20px) scale(.8)}70%{transform:translateY(-4px) scale(1.08)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes twinkle{to{transform:scale(1.4) rotate(45deg);color:#ff5990}}
.details{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;padding:27px 0 30px}
.detail{display:flex;gap:12px;align-items:flex-start}
.icon{font-size:18px;color:#b09ba7;width:23px;line-height:23px}
.detail h2{font-size:12px;margin:1px 0 7px;font-weight:700}
.detail p{font-size:11px;color:#9a8d95;margin:0;line-height:1.6}
footer{border-top:1px solid #e4dfe0;display:flex;justify-content:space-between;padding:18px 0 22px;font-family:monospace;font-size:9px;letter-spacing:.4px;color:#a3979e}
footer span:last-child{color:#c1819a}
@media(min-height:850px){.intro{padding-top:55px;padding-bottom:40px}.playground{height:410px}}
@media(max-width:650px){.page{padding:0 20px}header{height:77px}.badge{font-size:9px;padding:8px 10px}.brand{font-size:18px}.intro{display:block;padding:30px 0 25px}h1{letter-spacing:-2px;font-size:44px}.description{font-size:12px;max-width:280px;margin-top:18px;line-height:1.6}.playground{height:340px}.tr{display:none}.tl{left:18px}.bl{left:18px;font-size:8px}.br{right:18px;font-size:8px}.details{gap:16px;padding:24px 0}.detail{display:block}.icon{margin-bottom:8px;display:block}.detail h2{font-size:11px}.detail p{font-size:10px}.d1{left:10%}.d2{right:10%}footer{font-size:8px;gap:12px}.ring.two{width:360px;height:360px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
</style>
</head>
<body>
<div class="page">
<header>
  <div class="brand"><b>✳</b> little interactions</div>
  <div class="badge">100% PURE CSS</div>
</header>
<main>
  <div class="intro">
    <div>
      <div class="eyebrow">THE FEEL-GOOD EXPERIMENT / 001</div>
      <h1>Small click.<br><span>Big feelings.</span></h1>
    </div>
    <p class="description">An ordinary like button with a very<br>extra personality. <strong>Go ahead, try it.</strong></p>
  </div>
  <section class="playground" aria-label="Interactive animated like button">
    <input type="checkbox" id="love" aria-label="Like this. Click again to reset.">
    <div class="corner tl">INTERACTION PLAYGROUND</div>
    <div class="corner tr">CSS ONLY. FEELINGS INCLUDED.</div>
    <div class="corner bl">:CHECKED → A LITTLE MAGIC</div>
    <div class="corner br">SOUND OFF · JOY ON</div>
    <div class="ring"></div><div class="ring two"></div>
    <span class="decor d1">✧</span><span class="decor d2">✦</span><span class="decor d3">●</span><span class="decor d4">●</span>
    <div class="shockwave"></div><div class="shockwave second"></div>
    <div class="cheer">OH, THAT'S A LOT OF LOVE.</div>
    <div class="burst" aria-hidden="true">
      <i class="particle" style="--x:-210px;--y:-100px;--c:#ff3c79;--r:320deg"></i>
      <i class="particle" style="--x:-145px;--y:-130px;--c:#a077ee;--r:-200deg;--delay:.04s"></i>
      <i class="particle round" style="--x:-85px;--y:-128px;--c:#ffb82d"></i>
      <i class="particle" style="--x:0px;--y:-160px;--c:#ff7ea6;--r:400deg;--delay:.08s"></i>
      <i class="particle" style="--x:92px;--y:-135px;--c:#a077ee;--r:-300deg"></i>
      <i class="particle round" style="--x:165px;--y:-115px;--c:#ff3c79;--delay:.06s"></i>
      <i class="particle" style="--x:235px;--y:-70px;--c:#ffb82d;--r:420deg"></i>
      <i class="particle" style="--x:245px;--y:20px;--c:#a077ee;--r:-180deg;--delay:.03s"></i>
      <i class="particle round" style="--x:195px;--y:95px;--c:#ff7ea6"></i>
      <i class="particle" style="--x:135px;--y:145px;--c:#ff3c79;--r:380deg;--delay:.08s"></i>
      <i class="particle" style="--x:48px;--y:165px;--c:#ffb82d;--r:-270deg"></i>
      <i class="particle round" style="--x:-45px;--y:150px;--c:#a077ee;--delay:.1s"></i>
      <i class="particle" style="--x:-125px;--y:135px;--c:#ff7ea6;--r:500deg"></i>
      <i class="particle" style="--x:-205px;--y:80px;--c:#ffb82d;--r:-320deg;--delay:.06s"></i>
      <i class="particle round" style="--x:-245px;--y:10px;--c:#ff3c79"></i>
      <i class="particle star" style="--x:-250px;--y:-65px;--c:#ff3c79;--r:130deg">✦</i>
      <i class="particle star" style="--x:200px;--y:-150px;--c:#ffb82d;--r:-120deg;--delay:.05s">✧</i>
      <i class="particle star" style="--x:225px;--y:130px;--c:#a077ee;--r:170deg">✦</i>
      <i class="particle star" style="--x:-190px;--y:145px;--c:#ff3c79;--r:-160deg">✧</i>
    </div>
    <div class="center">
      <label class="like" for="love">
        <span class="heart-box" aria-hidden="true"><span class="heart"></span></span>
        <span class="words"><span class="off">Like this</span><span class="on">Loved it!</span></span>
        <span class="count"><span class="off">128</span><span class="on">129</span></span>
      </label>
    </div>
    <div class="note">a tiny click goes a long way</div>
  </section>
  <div class="details">
    <div class="detail"><span class="icon">↖</span><div><h2>Click for the good stuff</h2><p>One button. A whole lot of happy.</p></div></div>
    <div class="detail"><span class="icon">✧</span><div><h2>Zero JavaScript. All joy.</h2><p>Just CSS doing a little extra.</p></div></div>
    <div class="detail"><span class="icon">↻</span><div><h2>Love it all over again</h2><p>Click to reset. Repeat as needed.</p></div></div>
  </div>
</main>
<footer><span>CRAFTED WITH CSS & A SLIGHT LACK OF RESTRAINT</span><span>Less code. More confetti. ✳</span></footer>
</div>
</body>
</html>

Reasoning trace (513 tokens)

**Designing CSS Animation**

I'm focused on creating a stunning pure CSS checkbox animation that captures attention. I want to start with a meaningful background decoration to enhance the main card. The CSS toggle should have an animated burst effect, maybe with rings, sparks, and confetti orbiting a heart.

Aiming for an editorial layout with a playful vibe, I'll use off-white and electric pink on a full-screen pale lavender background. The central title could read "Small click. Big feelings." with a dramatic main heading. This needs to look polished and vibrant in the layout.**Creating a Pink Monochrome Design**

I'm designing a pink monochrome stage with dimensions 1050x420 that features the phrase "PRESS FOR A DOPAMINE HIT" at the top. The heart button will be black when unselected, outlined in white, and change to bright red when selected, complete with confetti.

I’m focusing on high-quality visuals without overwhelming elements. The layout will have a massive header titled "MICRO INTERACTION / 001" with a red underline. I'll ensure the animations are engaging, like shaking labels and bouncing icons, to create lively interactions on click.**Designing a Confetti Animation**

I'm focusing on creating a confetti effect using spans and CSS variables for coordinates. The animation for checked explosions will last 1.3 seconds and run once with a repeated ring pulse that subtly runs infinitely when selected.

I want to ensure the button checkbox is accessible, with a visually hidden class. The label will feature text like "Like this" or "Loved it!" with a width of 272 and height of 88. The card will have a radial white and pink tint, with an instructional caption near the button. I'll also incorporate pure CSS elements like heart shapes and draw confetti without using JavaScript, ensuring reduced motion options.