Claude Haiku 4.5

The user wants a "like" button that:
1. Is in pure CSS (no JavaScript)
2. Does a crazy animation when clicked
3. Is self-contained HTML
4. Works in a 1280×800 viewport and adapts down to 375px

Since it needs to be clickable and animate without JavaScript, I need to use CSS features like:
- `:active` pseudo-class for the click state
- `animation` for the animation
- Maybe `transform` effects

For a "like" button, I should create:
1. A heart icon
2. When clicked (using :active), trigger an animation
3. Make the animation "crazy" - maybe spinning, scaling, particles, etc.

I can use CSS animations combined with `:active` selector. However, `:active` only lasts while the mouse is pressed, so the animation needs to happen during that time.

Actually, a better approach might be to use a checkbox (which has a checked state that persists) with a label styled as a button. Then use `:checked` pseudo-class to trigger animations. But the animation would only show when checked, not on each click.

Hmm, let me think about this differently. The `:active` pseudo-class is triggered when an element is being clicked/pressed. During that time, we can apply animations. However, the animation will only play while the button is pressed, which might be too short.

Another approach: use a checkbox with a label. Each click toggles the checkbox state, and we can use `:checked` to show animations. We could add multiple checkboxes and use JavaScript... but we can't use JavaScript.

Actually, with pure CSS and no JavaScript, if we want animations on each click that persist and restart, we're somewhat limited. But we can:

1. Use a checkbox to toggle a state
2. Apply animations based on that state
3. The user can toggle it on/off

Or we can make it so the animation happens during the `:active` state, but it will be cut short.
Let me try using `:active` and designing a sequence that looks good even cut short, or make it long enough to feel complete once released. I'll use a button, apply a multi-keyframe animation combining scale, rotation, color shifts, and a glow effect triggered by `:active`.

An alternative: pair a checkbox with a label, toggling `:checked` state, pairing it with pseudo-elements for a burst effect on click.

I'll go with a heart-shaped like button, combining `:active` for instant feedback plus layered CSS keyframe animations (scale, rotate, color, glow) to create a playful "crazy" effect despite the short active window.

s: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: Arial, sans-serif;
  }

  .like-button {
    width: 80px;
    height: 80px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff1744, #ff5252);
    color: white;
    font-size: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.2s ease;
  }

I'll style the button with a gradient background, circular shape, and hover/active states. For the active press, I'm using an infinite keyframe animation with scale and rotate transforms to create a pulsing heart effect - scaling up and down while rotating slightly for a playful bounce.

I'm also adding a `::before` pseudo-element for a radial gradient shine effect that triggers on active, scaling outward and fading opacity to simulate a burst of light.

But there's a problem - CSS `:active` only applies while the mouse is held down, so releasing the click stops the animation immediately. That's not quite right for a "like" button where users expect a satisfying click-and-release animation. I need a different approach, maybe using a brief animation triggered differently, or relying on JavaScript to toggle a class on click instead of depending on `:active` state.

.95) rotate(8deg);
    }
    90% {
      transform: scale(1.05) rotate(-3deg);
    }
    100% {
      transform: scale(1) rotate(0deg);
    }
  }
```

I'm building a wild scale-and-rotate pulse that fires on `:active`, bouncing through multiple keyframes with a springy cubic-bezier for extra chaos. The hover state adds a glowing shadow for polish before the click animation even triggers.

Now I'll layer in a burst effect using `::before` — a radial gradient circle that scales up and fades out on click, giving that explosive "pop" feeling behind the button. I'm also adding a sparkle `::after` element with a ✨ emoji that twinkles outward on activation, using transform and opacity to create a little particle-like flourish.

For the HTML structure, I'm keeping it simple: a centered container, an `<h1>` prompting the user to click, and the heart button itself using the ♥ character.

That said, animating multiple sparkles at different trajectories purely in CSS seems overly complex for one pseudo-element. I think it's better to scale back and focus on making the core button animation — scale/rotate bounce plus the burst gradient — really polished rather than trying to force a multi-sparkle effect. Setting up the page with a nice gradient background and centered flex layout to showcase the button cleanly.

ate(12deg); }
    90% { transform: scale(1.05) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

Adding before/after pseudo-elements gives a burst and glow effect layered on top of the shake. A media query at 600px shrinks the button for mobile. Checking the final version: pure CSS, heart button, chaotic click animation combining scale/rotation/burst/glow, responsive from 1280px down to 375px, visible on first paint, no JS or external dependencies. The 0.5s active-state animation feels snappy and satisfying for a click interaction.