Exploding like buttonOne-line

Claude Opus 5.5

by Anthropicreasoning 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 8 s
Cost: $0.160
Output tokens: 7,873
Spent thinking: 2,013 tokens
Speed: 121.9 tok/s
Console errors: 0

First token after: 3.1 s
First visible text after: 25.1 s
Prompt tokens: 538
Code size: 11.5 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-opus-5.5
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 · 204 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pure CSS Like Button</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow-x:hidden}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(circle at 50% 40%,#2a1640 0%,#120a1f 60%,#07040c 100%);
  color:#f3e9ff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;gap:28px;padding:24px;position:relative;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,60,120,.55),rgba(140,60,255,.25) 40%,transparent 70%);
}
body:has(#like:checked)::before{animation:flash 1.4s ease-out}
@keyframes flash{0%{opacity:0}10%{opacity:1}100%{opacity:0}}

h1{font-size:clamp(22px,4vw,34px);font-weight:800;letter-spacing:.02em;text-align:center}
h1 span{background:linear-gradient(90deg,#ff4d8d,#ffb347,#7b5cff,#ff4d8d);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:slide 4s linear infinite}
@keyframes slide{to{background-position:300% 0}}
.sub{opacity:.6;font-size:14px;text-align:center;margin-top:6px}

.row{display:flex;gap:60px;align-items:center;justify-content:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column;align-items:center;gap:14px}
.tag{font-size:12px;text-transform:uppercase;letter-spacing:.15em;opacity:.5}

#like{position:absolute;opacity:0;pointer-events:none}

.btn{
  --size:150px;
  position:relative;width:var(--size);height:var(--size);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 35% 30%,#3a2654,#1b1029);
  box-shadow:0 10px 40px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,255,255,.08);
  transition:transform .15s;
}
.btn:hover{transform:scale(1.05)}
.btn:active{transform:scale(.92)}
.demo .btn{--size:110px;cursor:default}
.demo .btn:hover{transform:none}

.heart{width:46%;height:46%;position:relative;z-index:3;color:#5b4870;transition:color .3s;
  filter:drop-shadow(0 0 0 transparent)}
.heart svg{width:100%;height:100%;display:block;overflow:visible}

/* idle hint pulse */
#like:not(:checked)+.btn{animation:hint 2s ease-in-out infinite}
@keyframes hint{0%,100%{box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 0 rgba(255,77,141,.35)}50%{box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 16px rgba(255,77,141,0)}}
#like:not(:checked)+.btn .heart{animation:unlike .45s ease}
@keyframes unlike{0%{transform:scale(1)}40%{transform:scale(.6) rotate(-8deg)}100%{transform:scale(1)}}

/* elements */
.ring,.wave,.p,.c,.plus{position:absolute;pointer-events:none;opacity:0}
.ring{width:100%;height:100%;border-radius:50%;border:solid #b45cff;z-index:2}
.wave{width:100%;height:100%;border-radius:50%;border:3px solid rgba(255,120,180,.8);z-index:1}
.p{width:14px;height:14px;border-radius:50%;left:calc(50% - 7px);top:calc(50% - 7px);z-index:2}
.p.s{width:8px;height:8px;left:calc(50% - 4px);top:calc(50% - 4px)}
.c{width:8px;height:16px;left:calc(50% - 4px);top:calc(50% - 8px);border-radius:2px;z-index:2}
.plus{font-weight:900;font-size:26px;color:#ff6fa5;top:-6px;z-index:4;text-shadow:0 0 12px #ff4d8d}

.p:nth-child(4n+1){background:#ff4d8d}.p:nth-child(4n+2){background:#ffb347}
.p:nth-child(4n+3){background:#7b5cff}.p:nth-child(4n){background:#3de0c8}
.c:nth-child(3n){background:#ffe14d}.c:nth-child(3n+1){background:#ff5ce1}.c:nth-child(3n+2){background:#5cd6ff}

/* ===== ACTIVE STATE (checked OR demo loop) ===== */
#like:checked+.btn .heart,.demo .heart{color:#ff2e6e;animation:heart 2s cubic-bezier(.2,.9,.3,1.3) forwards, glow 1.6s 1s ease-in-out infinite}
.demo .heart{animation:heart 2.4s cubic-bezier(.2,.9,.3,1.3) infinite}
@keyframes heart{
  0%{transform:scale(0) rotate(0)}
  14%{transform:scale(1.55) rotate(-18deg)}
  21%{transform:scale(.75) rotate(12deg)}
  28%{transform:scale(1.2) rotate(-6deg)}
  35%{transform:scale(.95) rotate(3deg)}
  42%,100%{transform:scale(1) rotate(0)}
}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 6px rgba(255,46,110,.6))}50%{filter:drop-shadow(0 0 18px rgba(255,46,110,1))}}

#like:checked+.btn{animation:shake .6s .15s;background:radial-gradient(circle at 35% 30%,#4a1f45,#22102a)}
@keyframes shake{
  0%,100%{translate:0 0}15%{translate:-6px 3px}30%{translate:6px -4px}45%{translate:-4px -3px}60%{translate:4px 4px}75%{translate:-2px 1px}
}

#like:checked+.btn .ring{animation:ring 2s ease-out forwards}
.demo .ring{animation:ring 2.4s ease-out infinite}
@keyframes ring{
  0%{opacity:1;transform:scale(0);border-width:60px;border-color:#ff4d8d}
  20%{opacity:1;transform:scale(1.1);border-width:20px;border-color:#b45cff}
  32%{opacity:1;transform:scale(1.5);border-width:0;border-color:#7b5cff}
  33%,100%{opacity:0}
}

#like:checked+.btn .wave{animation:wave 2s ease-out forwards}
.demo .wave{animation:wave 2.4s ease-out infinite}
@keyframes wave{0%{opacity:0;transform:scale(1)}10%{opacity:1}50%,100%{opacity:0;transform:scale(3.6)}}

#like:checked+.btn .p,.demo .p{animation:burst 2s cubic-bezier(.1,.8,.3,1) forwards}
.demo .p{animation-duration:2.4s;animation-iteration-count:infinite}
.p{transform:rotate(calc(var(--i)*30deg))}
.p.s{transform:rotate(calc(var(--i)*30deg + 15deg))}
@keyframes burst{
  0%,8%{opacity:0;transform:rotate(calc(var(--i)*30deg)) translateY(0) scale(1)}
  10%{opacity:1}
  40%{opacity:1;transform:rotate(calc(var(--i)*30deg)) translateY(calc(var(--d,-105px))) scale(.9)}
  55%,100%{opacity:0;transform:rotate(calc(var(--i)*30deg)) translateY(calc(var(--d,-105px) * 1.15)) scale(0)}
}
.p.s{--d:-75px}
.p.s{animation-name:burst2!important}
@keyframes burst2{
  0%,8%{opacity:0;transform:rotate(calc(var(--i)*30deg + 15deg)) translateY(0) scale(1)}
  10%{opacity:1}
  38%{opacity:1;transform:rotate(calc(var(--i)*30deg + 15deg)) translateY(-80px) scale(1)}
  52%,100%{opacity:0;transform:rotate(calc(var(--i)*30deg + 15deg)) translateY(-92px) scale(0)}
}

#like:checked+.btn .c,.demo .c{animation:confetti 2s cubic-bezier(.15,.7,.4,1) forwards}
.demo .c{animation-duration:2.4s;animation-iteration-count:infinite}
@keyframes confetti{
  0%,12%{opacity:0;transform:rotate(calc(var(--i)*36deg + 10deg)) translateY(0) rotate(0)}
  14%{opacity:1}
  55%{opacity:1;transform:rotate(calc(var(--i)*36deg + 10deg)) translateY(-150px) rotate(540deg)}
  75%,100%{opacity:0;transform:rotate(calc(var(--i)*36deg + 10deg)) translateY(-120px) rotate(900deg) scale(.4)}
}

#like:checked+.btn .plus,.demo .plus{animation:plus 2s ease-out forwards}
.demo .plus{animation-duration:2.4s;animation-iteration-count:infinite}
@keyframes plus{
  0%,15%{opacity:0;transform:translateY(10px) scale(.5)}
  25%{opacity:1;transform:translateY(-30px) scale(1.3)}
  60%{opacity:1;transform:translateY(-55px) scale(1)}
  80%,100%{opacity:0;transform:translateY(-75px) scale(.8)}
}

/* counter */
.count{display:flex;align-items:center;gap:8px;font-weight:700;font-size:20px}
.nums{height:1.3em;overflow:hidden;line-height:1.3em;display:inline-block}
.nums span{display:block;transition:transform .5s cubic-bezier(.5,1.8,.5,.8)}
#like:checked ~ .count .nums span{transform:translateY(-100%)}
.label{font-size:14px;opacity:.6;font-weight:500}
.label b{display:none;color:#ff4d8d;opacity:1}
#like:checked ~ .count .label{opacity:1}
#like:checked ~ .count .label b{display:inline}
#like:checked ~ .count .label i{display:none}
.label i{font-style:normal}

@media (max-width:480px){.row{gap:40px}.btn{--size:130px}}
</style>
</head>
<body>
<div>
  <h1>The <span>Craziest</span> Like Button</h1>
  <p class="sub">100% CSS · zero JavaScript · click the heart (click again to unlike)</p>
</div>

<div class="row">
  <div class="col">
    <span class="tag">Your turn ↓</span>
    <input type="checkbox" id="like">
    <label for="like" class="btn" aria-label="Like">
      <span class="wave"></span>
      <span class="ring"></span>
      <span class="p" style="--i:0"></span><span class="p" style="--i:1"></span><span class="p" style="--i:2"></span><span class="p" style="--i:3"></span>
      <span class="p" style="--i:4"></span><span class="p" style="--i:5"></span><span class="p" style="--i:6"></span><span class="p" style="--i:7"></span>
      <span class="p" style="--i:8"></span><span class="p" style="--i:9"></span><span class="p" style="--i:10"></span><span class="p" style="--i:11"></span>
      <span class="p s" style="--i:0"></span><span class="p s" style="--i:1"></span><span class="p s" style="--i:2"></span><span class="p s" style="--i:3"></span>
      <span class="p s" style="--i:4"></span><span class="p s" style="--i:5"></span><span class="p s" style="--i:6"></span><span class="p s" style="--i:7"></span>
      <span class="p s" style="--i:8"></span><span class="p s" style="--i:9"></span><span class="p s" style="--i:10"></span><span class="p s" style="--i:11"></span>
      <span class="c" style="--i:0"></span><span class="c" style="--i:1"></span><span class="c" style="--i:2"></span><span class="c" style="--i:3"></span><span class="c" style="--i:4"></span>
      <span class="c" style="--i:5"></span><span class="c" style="--i:6"></span><span class="c" style="--i:7"></span><span class="c" style="--i:8"></span><span class="c" style="--i:9"></span>
      <span class="plus">+1</span>
      <span class="heart"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg></span>
    </label>
    <div class="count">
      <span class="nums"><span>1,337</span><span>1,338</span></span>
      <span class="label"><i>likes</i><b>likes · you ❤</b></span>
    </div>
  </div>

  <div class="col demo">
    <span class="tag">Auto preview</span>
    <div class="btn">
      <span class="wave"></span>
      <span class="ring"></span>
      <span class="p" style="--i:0"></span><span class="p" style="--i:1"></span><span class="p" style="--i:2"></span><span class="p" style="--i:3"></span>
      <span class="p" style="--i:4"></span><span class="p" style="--i:5"></span><span class="p" style="--i:6"></span><span class="p" style="--i:7"></span>
      <span class="p" style="--i:8"></span><span class="p" style="--i:9"></span><span class="p" style="--i:10"></span><span class="p" style="--i:11"></span>
      <span class="p s" style="--i:0"></span><span class="p s" style="--i:1"></span><span class="p s" style="--i:2"></span><span class="p s" style="--i:3"></span>
      <span class="p s" style="--i:4"></span><span class="p s" style="--i:5"></span><span class="p s" style="--i:6"></span><span class="p s" style="--i:7"></span>
      <span class="p s" style="--i:8"></span><span class="p s" style="--i:9"></span><span class="p s" style="--i:10"></span><span class="p s" style="--i:11"></span>
      <span class="c" style="--i:0"></span><span class="c" style="--i:1"></span><span class="c" style="--i:2"></span><span class="c" style="--i:3"></span><span class="c" style="--i:4"></span>
      <span class="c" style="--i:5"></span><span class="c" style="--i:6"></span><span class="c" style="--i:7"></span><span class="c" style="--i:8"></span><span class="c" style="--i:9"></span>
      <span class="plus">+1</span>
      <span class="heart"><svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg></span>
    </div>
    <span class="label">looping demo</span>
  </div>
</div>
</body>
</html>

Reasoning trace (2,013 tokens)

I'm working on a CSS-only button using the checkbox hack, since there's no JavaScript allowed. It needs to look right on first paint and have a dramatic animation when clicked. I'm also considering a small looping preview of hearts so something meaningful shows up in a screenshot.

I'm sketching out the heart button's animation: the heart scales up and bounces, a ring expands, particles fly outward using angle custom properties, and the counter ticks from 127 to 128. The unchecked state gets a subtle grey shrink so it doesn't feel jarring on first paint.

Each particle is set up to rotate by its angle and fly outward while shrinking, with sixteen of them arranged in two rings at different distances. For the looping demo, I'm weighing whether to write separate keyframes or stretch the main ones, and leaning toward a hold-based timing so it can repeat cleanly.

Now I'm making the particle layout concrete: twelve larger dots on one ring and twelve smaller ones offset by an angle on a second ring.

Still writing keyframes...

Now I'm setting up the layout: a dark gradient stage, a "Click the heart" hint, and a smaller auto-preview loop beside the main button that wraps on narrow screens. The heart will be grey when unchecked and turn to a red-pink gradient when checked, with a pulsing glow. I'm planning to share one selector list between the main button and the demo so both use the same heart animation, with a shorter deflate animation for unchecking.

Still writing styles...