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: 11.0 s
Cost: $0.0016
Output tokens: 3,020
Spent thinking: 0 tokens
Speed: 290.7 tok/s
Console errors: 0

First token after: 662 ms
First visible text after: 662 ms
Prompt tokens: 537
Code size: 6.3 KB
Finish reason: stop
Served by: Claude Platform on AWS
Model id: anthropic/claude-haiku-5.5
Reasoning sent: {"effort":"none"}
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 · 251 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crazy Like Button (Pure CSS)</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 30% 20%, #2b1055, #0f0c29 60%, #000 100%);
    font-family: "Segoe UI", system-ui, sans-serif;
    color: #fff;
    padding: 24px;
    text-align: center;
    overflow: hidden;
  }

  h1 {
    font-size: clamp(1.4rem, 4vw, 2.2rem);
    letter-spacing: 2px;
    text-shadow: 0 0 18px #ff4fd8;
  }

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

  /* ---------- The like button ---------- */
  .like-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hidden checkbox drives the state with the :checked selector */
  .like-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .like-btn {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: linear-gradient(135deg, #ff6ec4, #7873f5);
    box-shadow: 0 10px 30px rgba(255, 110, 196, 0.45);
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .like-btn:hover { transform: scale(1.08); }
  .like-btn:active { transform: scale(0.92); }

  /* The heart is built from two rotated, rounded squares plus a pseudo-element */
  .heart {
    position: relative;
    width: 56px;
    height: 56px;
    transform: rotate(-45deg);
    transition: transform 0.6s cubic-bezier(.2, 1.8, .4, 1), background 0.3s ease;
  }

  .heart::before,
  .heart::after {
    content: "";
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    transition: background 0.3s ease, transform 0.6s;
  }
  .heart::before { top: -28px; left: 0; }
  .heart::after  { left: 28px; top: 0; }

  .heart-shape {
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 0 0 0 0;
    transition: background 0.3s ease;
  }

  /* Heart fill colour when liked */
  .like-input:checked + .like-btn .heart,
  .like-input:checked + .like-btn .heart::before,
  .like-input:checked + .like-btn .heart::after {
    background: #ff1f5a;
  }

  /* Crazy burst: the heart spins, bounces, and a shockwave ring expands */
  .like-input:checked + .like-btn {
    animation: crazy 0.9s cubic-bezier(.2,.9,.3,1.4);
    box-shadow: 0 0 60px #ff1f5a, 0 0 120px #ff6ec4;
  }

  .like-input:checked + .like-btn .heart {
    transform: rotate(-45deg) scale(1.35);
    animation: heartbeat 0.9s ease-out;
  }

  .like-btn::before,
  .like-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid #ff1f5a;
    opacity: 0;
    pointer-events: none;
  }

  .like-input:checked + .like-btn::before {
    animation: shockwave 0.9s ease-out;
  }
  .like-input:checked + .like-btn::after {
    animation: shockwave 0.9s ease-out 0.18s;
  }

  /* Confetti-like particles using box-shadow on a pseudo element */
  .like-btn .sparks {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
  }

  .like-input:checked + .like-btn .sparks {
    animation: sparks 0.9s ease-out;
  }

  /* Counter-like label that pops */
  .label {
    position: absolute;
    bottom: -44px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    color: #ffb3e6;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
  }

  .like-input:checked ~ .like-btn + .label {
    animation: labelPop 0.9s ease-out;
  }

  /* Hidden checkbox label: keyboard focus ring for accessibility */
  .like-input:focus-visible + .like-btn {
    outline: 3px dashed #fff;
    outline-offset: 8px;
  }

  /* ---------- Keyframes ---------- */
  @keyframes crazy {
    0%   { transform: scale(1) rotate(0deg); }
    15%  { transform: scale(0.7) rotate(-25deg); }
    35%  { transform: scale(1.35) rotate(20deg); }
    55%  { transform: scale(0.9) rotate(-10deg); }
    75%  { transform: scale(1.1) rotate(6deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  @keyframes heartbeat {
    0%   { transform: rotate(-45deg) scale(0.4); }
    40%  { transform: rotate(-45deg) scale(1.6); }
    60%  { transform: rotate(-45deg) scale(1.2); }
    80%  { transform: rotate(-45deg) scale(1.45); }
    100% { transform: rotate(-45deg) scale(1.35); }
  }

  @keyframes shockwave {
    0%   { transform: scale(1);   opacity: 0.9; }
    100% { transform: scale(2.6); opacity: 0; }
  }

  @keyframes sparks {
    0%   { box-shadow: none; opacity: 1; }
    100% {
      opacity: 0;
      box-shadow:
        0 -90px 0 #ff1f5a,  70px -70px 0 #ffd166,
        90px 0 0 #06d6a0,   70px 70px 0 #ff6ec4,
        0 90px 0 #7873f5, -70px 70px 0 #ffd166,
        -90px 0 0 #06d6a0, -70px -70px 0 #ff6ec4;
    }
  }

  @keyframes labelPop {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.3); }
    30%  { opacity: 1; transform: translateX(-50%) scale(1.4) rotate(-6deg); }
    60%  { transform: translateX(-50%) scale(0.95) rotate(4deg); }
    100% { opacity: 1; transform: translateX(-50%) scale(1) rotate(0deg); }
  }

  /* Responsive tweaks for narrow screens */
  @media (max-width: 420px) {
    .like-btn { width: 120px; height: 120px; }
    .heart { width: 44px; height: 44px; }
    .heart::before, .heart::after { width: 44px; height: 44px; }
    .heart::before { top: -22px; }
    .heart::after  { left: 22px; }
  }
</style>
</head>
<body>

  <h1>Give it a like!</h1>
  <p class="hint">Click the heart (no JavaScript involved)</p>

  <label class="like-wrap">
    <input type="checkbox" class="like-input">
    <span class="like-btn" aria-hidden="true">
      <span class="heart"></span>
      <span class="sparks"></span>
    </span>
    <span class="label">LIKED!!</span>
  </label>

</body>
</html>