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: 40.4 s
Cost: $0.0047
Output tokens: 9,275
Spent thinking: 5,578 tokens
Speed: 241.5 tok/s
Console errors: 0

First token after: 2.0 s
First visible text after: 29.3 s
Prompt tokens: 538
Code size: 7.5 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.5
Reasoning sent: {"effort":"high"}
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 · 272 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Like Button</title>
<style>
  * { box-sizing: border-box; }

  html, body { height: 100%; }

  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow-x: hidden;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #eef0ff;
    background:
      radial-gradient(circle at 25% 15%, #3a1d5e 0%, transparent 45%),
      radial-gradient(circle at 80% 85%, #1e3a5f 0%, transparent 50%),
      #0d0b1f;
    padding: 24px;
  }

  /* Hidden checkbox that holds the "liked" state. No JavaScript needed. */
  .toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  .card {
    width: min(340px, 100%);
    padding: 36px 28px 28px;
    text-align: center;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .title {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.2px;
  }

  .sub {
    margin: 0 0 22px;
    font-size: 0.9rem;
    color: #9aa0c3;
  }

  /* ---------- The button ---------- */
  .btn {
    position: relative;
    width: 124px;
    height: 124px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 50%;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
  }

  .btn:active {
    transform: scale(0.85);
  }

  .heart {
    width: 84px;
    height: 84px;
    overflow: visible;
    fill: transparent;
    stroke: #7d82a8;
    stroke-width: 1.6;
    stroke-linejoin: round;
    transition: fill 0.25s ease, stroke 0.25s ease, filter 0.25s ease;
    position: relative;
    z-index: 2;
  }

  /* Expanding shockwave ring */
  .ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid #ff3b78;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }

  /* Particle burst: each dot is rotated to its angle, then flung outward */
  .burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: var(--c);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
  }

  /* ---------- Count ---------- */
  .count {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #ff8fb1;
    line-height: 1.2;
  }

  .count .on { display: none; }

  /* ---------- LIKED STATE (triggered by the checkbox) ---------- */

  /* Heart fills in and does a crazy spin + overshoot */
  .toggle:checked ~ .card .heart {
    fill: #ff3b78;
    stroke: #ff3b78;
    filter: drop-shadow(0 0 18px rgba(255, 59, 120, 0.75));
    animation: pop 0.9s cubic-bezier(0.3, 0.7, 0.3, 1);
  }

  /* Shockwave */
  .toggle:checked ~ .card .ring {
    animation: ring 0.7s ease-out;
  }

  /* Particles fly out with staggered angles and distances */
  .toggle:checked ~ .card .burst {
    animation: burst 0.85s cubic-bezier(0.15, 0.7, 0.3, 1);
  }

  /* Whole card shakes */
  .toggle:checked ~ .card {
    animation: shake 0.5s ease-in-out;
  }

  /* Count swaps and rolls up */
  .toggle:checked ~ .card .count .off { display: none; }
  .toggle:checked ~ .card .count .on {
    display: inline-block;
    animation: roll 0.45s ease-out;
  }

  /* Keyboard focus ring (checkbox is hidden, so style the label) */
  .toggle:focus-visible ~ .card .btn {
    outline: 2px solid #ffffff;
    outline-offset: 8px;
  }

  /* ---------- Keyframes ---------- */
  @keyframes pop {
    0%   { transform: scale(1) rotate(0deg); }
    20%  { transform: scale(0.5) rotate(-30deg); }
    45%  { transform: scale(1.6) rotate(380deg); }
    65%  { transform: scale(0.9) rotate(360deg); }
    80%  { transform: scale(1.15) rotate(360deg); }
    100% { transform: scale(1) rotate(360deg); }
  }

  @keyframes ring {
    0%   { opacity: 1; transform: scale(0.4); }
    100% { opacity: 0; transform: scale(2.4); }
  }

  @keyframes burst {
    0%   { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(0.3); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1); }
  }

  @keyframes roll {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    15%  { transform: translate(-6px, 3px) rotate(-1.5deg); }
    30%  { transform: translate(6px, -3px) rotate(1.5deg); }
    45%  { transform: translate(-5px, 2px) rotate(-1deg); }
    60%  { transform: translate(5px, -2px) rotate(1deg); }
    75%  { transform: translate(-2px, 1px) rotate(0deg); }
  }

  .hint {
    margin: 18px 0 0;
    font-size: 0.78rem;
    color: #6f759c;
  }

  /* ---------- Small screens ---------- */
  @media (max-width: 400px) {
    .card { padding: 28px 18px 22px; }
    .btn { width: 104px; height: 104px; }
    .heart { width: 72px; height: 72px; }
  }

  /* Respect users who prefer less motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
    }
  }
</style>
</head>
<body>

  <input type="checkbox" id="like" class="toggle" aria-hidden="true">

  <div class="card">
    <h1 class="title">Loved this post?</h1>
    <p class="sub">Show some love and watch it go wild</p>

    <label for="like" class="btn" role="button" aria-label="Like">
      <span class="ring"></span>

      <span class="burst" style="--a:0deg;   --d:82px;  --c:#ff3b78; --delay:0s"></span>
      <span class="burst" style="--a:22.5deg;--d:100px; --c:#ffd23f"></span>
      <span class="burst" style="--a:45deg;  --d:84px;  --c:#5cf2ff"></span>
      <span class="burst" style="--a:67.5deg;--d:104px; --c:#9b5cff"></span>
      <span class="burst" style="--a:90deg;  --d:86px;  --c:#7cff6b"></span>
      <span class="burst" style="--a:112.5deg;--d:100px;--c:#ff3b78"></span>
      <span class="burst" style="--a:135deg; --d:82px;  --c:#ffd23f"></span>
      <span class="burst" style="--a:157.5deg;--d:104px;--c:#5cf2ff"></span>
      <span class="burst" style="--a:180deg; --d:84px;  --c:#9b5cff"></span>
      <span class="burst" style="--a:202.5deg;--d:100px;--c:#7cff6b"></span>
      <span class="burst" style="--a:225deg; --d:86px;  --c:#ff3b78"></span>
      <span class="burst" style="--a:247.5deg;--d:104px;--c:#ffd23f"></span>
      <span class="burst" style="--a:270deg; --d:82px;  --c:#5cf2ff"></span>
      <span class="burst" style="--a:292.5deg;--d:100px;--c:#9b5cff"></span>
      <span class="burst" style="--a:315deg; --d:84px;  --c:#7cff6b"></span>
      <span class="burst" style="--a:337.5deg;--d:104px;--c:#ff3b78"></span>

      <svg class="heart" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 21 C12 21 3 15 3 9 C3 6 5.5 4 8 4 C9.8 4 11.2 5 12 6.3 C12.8 5 14.2 4 16 4 C18.5 4 21 6 21 9 C21 15 12 21 12 21 Z"/>
      </svg>
    </label>

    <p class="sub" style="margin-top:20px;margin-bottom:0;">
      <span class="count">
        <span class="off">1,248</span><span class="on">1,249</span>
      </span>
      &nbsp;likes
    </p>

    <p class="hint">Click the heart. Click again to unlike.</p>
  </div>

</body>
</html>

Reasoning trace (5,578 tokens)

I'm working out a pure-CSS "like" button with a playful click animation and no JavaScript, to be shown as one HTML code block that is visible on first paint. I'm planning a heart-shaped button built from a hidden checkbox and a label.

I'm planning the heart's behavior beyond the toggle: a bounce, a spin, bursting particles, and a counter that bumps from one number to the next using pseudo-element content swapped by the checked state. Unliking should play the animation in reverse.

Still writing the particle burst keyframes...

Still working on the keyframes: the particles fly outward and fade, and I'm writing a heart pop animation that scales and rotates with an overshoot.

Still writing the markup: a hidden checkbox, a card wrapper, and a label holding a ring and a burst of particles.

Still writing the heart's SVG path, a simplified outline for the button icon.

Still writing the heart's SVG path and the hidden-checkbox styling, with a focus-visible outline wired through the sibling selector.

Still writing the particle styling: the burst dots are absolutely positioned at the center, each rotated by its own angle.

Still writing the particle keyframes: each dot moves outward along its own angle and fades as it scales up.

Still writing the ring and count rules: the ring scales up and fades on check, the card shakes, and the count swaps between two spans with a roll-up animation.

Still writing the heart's pop keyframes, with an overshoot spin and a scale bounce.

Still working out the heart's full keyframes, ending the rotation at a full turn so it lines up with its starting position.

Still writing the body and page styles, centering the card with a dark gradient background, and I'm checking whether the particles will spill past the stage edges on a narrow screen.

Still writing the card and button styles, with the heart sized and stroked for its off state.

Still writing the heart's fill and stroke rules, with the checked state turning it pink and a drop shadow glowing behind it.

Still writing the burst particles: each one is a small absolutely positioned dot in the center, and they animate outward when checked.

Still writing the particle styling: the burst dots get their colors, sixteen angles spaced around the circle, and alternating distances.

Still writing the counter rules: the off number hides on check and the on number rolls in with its own animation. I'm also weighing whether the card should shake on like, and whether unliking needs its own reverse animation on the heart.

Still writing the hint text and the focus styling, so keyboard users can see where focus lands on the button.

Still writing the keyframes: the ring expands and fades, and the particles fly outward along their angles while scaling and fading.

Still writing the shake keyframes for the card, with small translations and rotations.

Still writing the mobile styles and the shake keyframes for the card.