Exploding like buttonOne-line

Claude Haiku 5.5

by AnthropicReasoningClean

Open in new window

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

How it went

Total time: 42.9 s
Cost: $0.0049
Output tokens: 9,737
Spent thinking: 5,990 tokens
Speed: 236.2 tok/s
Console errors: 0

First token after: 1.7 s
First visible text after: 32.2 s
Prompt tokens: 538
Code size: 7.7 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.5
Reasoning sent: {"effort":"medium"}
Max output: 32,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 · 300 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>
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; }

  body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-x: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #fff;
    background:
      radial-gradient(circle at 50% 35%, #3a1452 0%, #140a22 55%, #07040c 100%);
    text-align: center;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
  }

  .title {
    position: fixed;
    top: 28px;
    left: 0; right: 0;
    font-size: 13px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
  }

  .hint {
    position: fixed;
    bottom: 26px;
    left: 0; right: 0;
    font-size: 14px;
    color: rgba(255,255,255,.45);
  }

  /* Hidden checkbox holds the state. Focusable for keyboard users. */
  .like-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .like-input:focus-visible ~ .btn .stage {
    outline: 2px dashed #ff5c8a;
    outline-offset: 10px;
    border-radius: 50%;
  }

  .stage {
    position: relative;
    width: 240px;
    height: 240px;
    transition: transform .25s cubic-bezier(.3,1.6,.5,1);
  }
  .btn:hover .stage { transform: scale(1.06); }
  .btn:active .stage { transform: scale(.92); }

  /* ---------- Heart ---------- */
  .heart {
    --c: #4a3d63;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px;
    height: 90px;
    margin: -45px 0 0 -50px;
    transition: background .3s, filter .3s;
  }
  .heart::before,
  .heart::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50px;
    height: 80px;
    background: var(--c);
    border-radius: 50px 50px 0 0;
    transition: background .3s;
  }
  .heart::before {
    left: 50px;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  .heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }

  .like-input:checked ~ .btn .heart {
    --c: #ff2d6f;
    filter: drop-shadow(0 0 18px rgba(255,45,111,.9))
            drop-shadow(0 0 40px rgba(255,45,111,.5));
    animation: pop .75s cubic-bezier(.2,.9,.3,1.4);
  }

  @keyframes pop {
    0%   { transform: scale(1)    rotate(0deg); }
    15%  { transform: scale(.5)   rotate(-28deg); }
    35%  { transform: scale(1.6)  rotate(20deg); }
    55%  { transform: scale(.82)  rotate(-12deg); }
    75%  { transform: scale(1.12) rotate(5deg); }
    100% { transform: scale(1)    rotate(0deg); }
  }

  /* Whole stage shakes on click */
  .like-input:checked ~ .btn .stage {
    animation: shake .6s .05s;
  }
  @keyframes shake {
    0%, 100% { translate: 0 0; }
    10% { translate: -14px 6px; }
    20% { translate: 12px -8px; }
    30% { translate: -10px -4px; }
    40% { translate: 8px 10px; }
    50% { translate: -6px -2px; }
    60% { translate: 4px 3px; }
    70% { translate: -2px 1px; }
  }

  /* ---------- Shockwave rings ---------- */
  .ring,
  .stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    border: 4px solid #ff2d6f;
    opacity: 0;
    pointer-events: none;
  }
  .stage::before { border-color: #5ee7ff; }

  .like-input:checked ~ .btn .ring {
    animation: ring .8s ease-out forwards;
  }
  .like-input:checked ~ .btn .stage::before {
    animation: ring .9s .18s ease-out forwards;
  }

  @keyframes ring {
    0%   { opacity: 1; transform: scale(.3); border-width: 14px; }
    100% { opacity: 0; transform: scale(2.7); border-width: 0; }
  }

  /* ---------- Flash ---------- */
  .stage::after {
    content: "";
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, rgba(255,200,230,.6) 35%, transparent 70%);
    opacity: 0;
    pointer-events: none;
  }
  .like-input:checked ~ .btn .stage::after {
    animation: flash .45s ease-out;
  }
  @keyframes flash {
    0%   { opacity: 1; transform: scale(.4); }
    100% { opacity: 0; transform: scale(1.8); }
  }

  /* ---------- Particle burst ---------- */
  .burst i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 10px var(--c);
    opacity: 0;
    pointer-events: none;
  }
  .burst i:nth-child(even) { border-radius: 2px; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }

  .like-input:checked ~ .btn .burst i {
    animation: burst .95s cubic-bezier(.1,.7,.3,1) forwards;
  }

  @keyframes burst {
    0%   { opacity: 1; transform: rotate(var(--r)) translateY(0) scale(.4); }
    55%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--r)) translateY(calc(var(--d) * -1)) rotate(540deg) scale(1.1); }
  }

  /* ---------- Counter (rolls both ways with transitions) ---------- */
  .count {
    position: relative;
    display: inline-block;
    height: 1.3em;
    min-width: 6ch;
    overflow: hidden;
    font-size: 30px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.3em;
  }
  .n {
    position: absolute;
    left: 0; right: 0; top: 0;
    transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .3s;
  }
  .n.a { transform: translateY(0); opacity: 1; }
  .n.b { transform: translateY(100%); opacity: 0; }

  .like-input:checked ~ .btn .n.a { transform: translateY(-100%); opacity: 0; }
  .like-input:checked ~ .btn .n.b { transform: translateY(0); opacity: 1; }

  .caption {
    font-size: 13px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    transition: color .3s;
  }
  .like-input:checked ~ .btn .caption { color: #ff7ab0; }

  /* ---------- Small screens ---------- */
  @media (max-width: 420px) {
    .stage { width: 200px; height: 200px; }
    .count { font-size: 24px; }
  }
</style>
</head>
<body>

  <div class="title">Pure CSS &middot; Zero JavaScript</div>

  <input type="checkbox" id="like" class="like-input" aria-label="Like">

  <label for="like" class="btn" role="button" aria-label="Like this post">
    <div class="stage">
      <div class="burst">
        <i style="--r:0deg;   --d:150px; --c:#ff2d6f"></i>
        <i style="--r:30deg;  --d:118px; --c:#ffd23f"></i>
        <i style="--r:60deg;  --d:170px; --c:#5ee7ff"></i>
        <i style="--r:90deg;  --d:130px; --c:#b56bff"></i>
        <i style="--r:120deg; --d:160px; --c:#7dff9b"></i>
        <i style="--r:150deg; --d:120px; --c:#ff8a3d"></i>
        <i style="--r:180deg; --d:175px; --c:#ff2d6f"></i>
        <i style="--r:210deg; --d:125px; --c:#ffd23f"></i>
        <i style="--r:240deg; --d:165px; --c:#5ee7ff"></i>
        <i style="--r:270deg; --d:135px; --c:#b56bff"></i>
        <i style="--r:300deg; --d:155px; --c:#7dff9b"></i>
        <i style="--r:330deg; --d:120px; --c:#ff8a3d"></i>
      </div>
      <span class="ring"></span>
      <div class="heart"></div>
    </div>

    <span class="count">
      <span class="n a">1,024</span>
      <span class="n b">1,025</span>
    </span>
    <span class="caption">likes</span>
  </label>

  <div class="hint">Click the heart</div>

</body>
</html>

Reasoning trace (5,990 tokens)

I'm working out a pure CSS like button that needs no JavaScript, using a hidden checkbox and a label as the clickable control. The heart has to show on first paint, and the click animation should be wild, with the heart bursting into particles, bouncing, rotating and scaling, with the particles built from pseudo-elements.

Next I'm settling the count display: without JavaScript it can't increment, so I'm thinking of swapping between two spans with :checked to show 1,024 and 1,025. The look is a dark gradient with a large button, a hidden checkbox tied to a label, and a heart built from circles and a square. The click animation covers a pop with overshoot, a burst of particles from child spans driven by angle variables, and a box-shadow shockwave ring. Each click toggles the state, so unliking will get a subtler reverse.

Still writing the heart CSS...

Still writing the heart animation and particle keyframes...

Still wiring up the count, the layout, and the heart's pink-on-checked styling.

Still writing the heart markup and the burst and ring elements...

Still writing the heart's pseudo-elements, with the two lobes rotated around their bottom corners so they meet in a point.

Still writing the heart's classic pseudo-element shape and centering it in a stage, with the particles positioned around the heart's center.

Still writing the burst keyframes and the particle positioning...

Still writing the count rollover and the body styling.

Still writing the card layout and the page styles...

Still writing the heart's positioning and the hover and active states on the stage.

Still writing the heart's lobes, tilting the left one with a rotation around its corner.

Still writing the heart's pop animation and the checked-state glow...

Still writing the heart's pop keyframes and adding a shake on the stage.

Still writing the burst particles and their outward motion...

Still writing the burst keyframes and working out how the particle rotation stacks with the translate.

Still writing the ring and burst shockwave styles...

Still writing the notification ring and flash styles for the stage...

Still writing the count transitions and the number slide-in...

Still writing the count rollover and the hover styles.

Still writing the responsive sizing and the burst particle markup...

Still writing the flash and ring styles for the stage, with the particles arranged around the heart at fixed angles.

Still writing the hover, shake, and pseudo-element rules for the stage...