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: 20.6 s
Cost: $0.0026
Output tokens: 5,103
Spent thinking: 1,241 tokens
Speed: 271.3 tok/s
Console errors: 0

First token after: 1.7 s
First visible text after: 8.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":"low"}
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 · 273 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; margin: 0; padding: 0; }

  html, body {
    height: 100%;
    overflow-x: hidden;
  }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background:
      radial-gradient(circle at 20% 20%, #2b1055 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, #0f3460 0%, transparent 50%),
      #0b0b1a;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #fff;
    padding: 24px;
    text-align: center;
  }

  h1 {
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(90deg, #ff6ec4, #7873f5, #4ade80);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  p.hint {
    font-size: 0.95rem;
    opacity: 0.6;
  }

  /* Hidden checkbox: the state lives here, CSS does the rest */
  .like-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: clamp(180px, 50vw, 240px);
    height: 72px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, #1e1e3a, #2a2a55);
    color: #fff;
    cursor: pointer;
    user-select: none;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .btn:hover { transform: translateY(-3px) scale(1.03); }
  .btn:active { transform: scale(0.94); }

  /* Keyboard focus ring (checkbox is visually hidden) */
  .like-input:focus-visible ~ .btn {
    outline: 3px solid #7873f5;
    outline-offset: 4px;
  }

  /* ----- Checked state colours ----- */
  .like-input:checked ~ .btn {
    background: linear-gradient(135deg, #ff2d6f, #ff6a3d);
    border-color: #ffd1e0;
    box-shadow: 0 0 40px rgba(255, 45, 111, 0.7), 0 10px 30px rgba(0,0,0,0.4);
    animation: shake 0.6s cubic-bezier(.36,.07,.19,.97);
  }

  /* ----- Heart ----- */
  .heart {
    width: 30px;
    height: 30px;
    fill: transparent;
    stroke: #fff;
    stroke-width: 2;
    stroke-linejoin: round;
    transition: fill 0.2s ease, stroke 0.2s ease;
    position: relative;
    z-index: 2;
  }

  .like-input:checked ~ .btn .heart {
    fill: #fff;
    stroke: #fff;
    animation: heartPop 0.9s cubic-bezier(.17,.67,.35,1.4) forwards;
  }

  .like-input:checked ~ .btn .heart {
    filter: drop-shadow(0 0 10px #fff);
  }

  /* ----- Text swap ----- */
  .label { position: relative; z-index: 2; }
  .label-liked { display: none; }
  .like-input:checked ~ .btn .label-like { display: none; }
  .like-input:checked ~ .btn .label-liked { display: inline; animation: textIn 0.5s ease both; }

  /* ----- Expanding shockwave ring ----- */
  .ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    border: 4px solid #ff2d6f;
    opacity: 0;
    pointer-events: none;
  }

  .like-input:checked ~ .btn .ring {
    animation: ringOut 0.8s ease-out forwards;
  }

  /* ----- Particle burst ----- */
  .particles {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .p {
    position: absolute;
    left: -6px;
    top: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--c);
    opacity: 0;
    box-shadow: 0 0 8px var(--c);
  }

  .p:nth-child(odd) { width: 8px; height: 8px; left: -4px; top: -4px; border-radius: 2px; }
  .p:nth-child(3n) { width: 14px; height: 14px; left: -7px; top: -7px; }

  .like-input:checked ~ .btn .p {
    animation: burst 1s cubic-bezier(.1,.8,.3,1) forwards;
    animation-delay: var(--delay, 0s);
  }

  /* ----- Keyframes ----- */
  @keyframes heartPop {
    0%   { transform: scale(1) rotate(0deg); }
    20%  { transform: scale(0.6) rotate(-20deg); }
    45%  { transform: scale(1.7) rotate(15deg); }
    65%  { transform: scale(0.9) rotate(-8deg); }
    80%  { transform: scale(1.15) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

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

  @keyframes ringOut {
    0%   { opacity: 1; transform: scale(0.3); border-width: 8px; }
    100% { opacity: 0; transform: scale(4.5); border-width: 1px; }
  }

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

  @keyframes textIn {
    0%   { transform: translateY(12px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }

  /* Gentle idle pulse so something moves on first paint */
  .btn:not(.idle-off)::before {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 999px;
    border: 2px solid rgba(255, 110, 196, 0.35);
    animation: idle 2.4s ease-out infinite;
    pointer-events: none;
  }

  .like-input:checked ~ .btn::before { display: none; }

  @keyframes idle {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.35); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01s !important;
      animation-iteration-count: 1 !important;
    }
  }
</style>
</head>
<body>

  <h1>Pure CSS Like Button</h1>
  <p class="hint">No JavaScript. Click it and watch it go off.</p>

  <input type="checkbox" id="like" class="like-input" aria-label="Like">
  <label for="like" class="btn">
    <span class="ring"></span>

    <span class="particles" aria-hidden="true">
      <span class="p" style="--a:0deg;   --d:110px; --c:#ff2d6f; --delay:0s"></span>
      <span class="p" style="--a:30deg;  --d:130px; --c:#ffd166; --delay:0.02s"></span>
      <span class="p" style="--a:60deg;  --d:95px;  --c:#7873f5; --delay:0.04s"></span>
      <span class="p" style="--a:90deg;  --d:120px; --c:#4ade80; --delay:0.01s"></span>
      <span class="p" style="--a:120deg; --d:105px; --c:#ff6ec4; --delay:0.05s"></span>
      <span class="p" style="--a:150deg; --d:135px; --c:#38bdf8; --delay:0.03s"></span>
      <span class="p" style="--a:180deg; --d:100px; --c:#ff2d6f; --delay:0.02s"></span>
      <span class="p" style="--a:210deg; --d:128px; --c:#ffd166; --delay:0.06s"></span>
      <span class="p" style="--a:240deg; --d:112px; --c:#7873f5; --delay:0.01s"></span>
      <span class="p" style="--a:270deg; --d:140px; --c:#4ade80; --delay:0.04s"></span>
      <span class="p" style="--a:300deg; --d:98px;  --c:#ff6ec4; --delay:0.03s"></span>
      <span class="p" style="--a:330deg; --d:124px; --c:#38bdf8; --delay:0.05s"></span>
    </span>

    <svg class="heart" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 21s-7.5-4.6-9.5-9C1 8.5 3 5 6.5 5 8.6 5 10.5 6.2 12 8c1.5-1.8 3.4-3 5.5-3C21 5 23 8.5 21.5 12 19.5 16.4 12 21 12 21z"/>
    </svg>

    <span class="label">
      <span class="label-like">Like</span>
      <span class="label-liked">Liked!</span>
    </span>
  </label>

</body>
</html>

Reasoning trace (1,241 tokens)

I'm working within the constraints: pure CSS with no JavaScript, so the like button will use a hidden checkbox paired with a label and the :checked state. The heart burst, particles, bounce, rotation and color change should all fire off that checked state, and the button has to be visible and centered on first paint. The keyboard prompt only applies to games, so clicking alone is fine here.

Writing the heart markup now...

Still writing the particle styles and their burst animation...

Still working on the particles and the heart's pop animation, with the ring and text swap planned too.

Still getting the visually hidden input set up so keyboard focus shows as an outline on the button. I also want the whole button to shake once when it's checked, and I'll keep the body background dark with sizing that adapts to screen width.