Exploding like buttonOne-line
Claude Haiku 4.5
by AnthropicReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 10.4 s
- Cost
- $0.013
- Output tokens
- 2,457
- Spent thinking
- 0 tokens
- Speed
- 316.2 tok/s
- Console errors
- 0
- First token after
- 2.6 s
- First visible text after
- 2.6 s
- Prompt tokens
- 374
- Code size
- 8.1 KB
- Finish reason
- stop
- Served by
- Amazon Bedrock
- Model id
anthropic/claude-haiku-4.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 · 278 lines
<!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</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.like-button {
position: relative;
width: 80px;
height: 80px;
border: none;
background: white;
border-radius: 50%;
cursor: pointer;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.1s ease;
overflow: hidden;
}
.like-button:active {
transform: scale(0.95);
}
/* Unchecked state - gray heart */
.like-button {
color: #ccc;
}
/* Checked state - filled red heart with animation */
.like-button:checked {
color: #ff4458;
}
/* Container for particles */
.particle {
position: fixed;
pointer-events: none;
font-size: 30px;
font-weight: bold;
}
/* Particle animation */
@keyframes float-up {
0% {
opacity: 1;
transform: translate(0, 0) scale(1) rotate(0deg);
}
100% {
opacity: 0;
transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(360deg);
}
}
@keyframes pop {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.like-button {
animation: none;
}
.like-button:checked {
animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Particle burst effect using CSS-only approach */
.like-button::before,
.like-button::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
}
.like-button::before {
background: radial-gradient(circle, rgba(255, 68, 88, 0.8), transparent 70%);
animation: none;
}
.like-button:checked::before {
animation: burst-ring 0.8s ease-out;
}
@keyframes burst-ring {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(2.5);
opacity: 0;
}
}
/* Multi-ring burst effect */
.like-button::after {
background: radial-gradient(circle, rgba(255, 200, 124, 0.6), transparent 70%);
animation: none;
}
.like-button:checked::after {
animation: burst-ring-2 1s ease-out 0.1s;
}
@keyframes burst-ring-2 {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(3);
opacity: 0;
}
}
/* Floating particles using box-shadow trick for multiple hearts */
.like-button {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.like-button:checked {
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.2),
-15px -15px 0 -10px #ff4458,
15px -15px 0 -10px #ff4458,
0px -25px 0 -10px #ff1744,
-25px 0px 0 -10px #ff4458,
25px 0px 0 -10px #ff4458,
-18px 18px 0 -10px #ff1744,
18px 18px 0 -10px #ff1744;
animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes particle-scatter {
0% {
opacity: 1;
transform: translate(0, 0) scale(1);
}
100% {
opacity: 0;
transform: translate(var(--tx), var(--ty)) scale(0);
}
}
/* Shadow particles that scatter */
.like-button:checked {
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.2),
-15px -15px 0 -10px #ff4458,
15px -15px 0 -10px #ff4458,
0px -25px 0 -10px #ff1744,
-25px 0px 0 -10px #ff4458,
25px 0px 0 -10px #ff4458,
-18px 18px 0 -10px #ff1744,
18px 18px 0 -10px #ff1744;
}
h1 {
color: white;
font-size: 28px;
text-align: center;
}
.instructions {
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>🎉 Like Button Magic 🎉</h1>
<input type="checkbox" class="like-button" id="likeBtn" aria-label="Like button">
<div class="instructions">Click the button to see the crazy animation!</div>
</div>
<script>
const button = document.getElementById('likeBtn');
button.addEventListener('change', function() {
if (this.checked) {
createParticles();
// Reset for next click
setTimeout(() => {
this.checked = false;
}, 600);
}
});
function createParticles() {
const button = document.getElementById('likeBtn');
const rect = button.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
// Create 12 scattered particles
for (let i = 0; i < 12; i++) {
const particle = document.createElement('div');
particle.textContent = '❤️';
particle.className = 'particle';
const angle = (i / 12) * Math.PI * 2;
const distance = 150 + Math.random() * 100;
const tx = Math.cos(angle) * distance;
const ty = Math.sin(angle) * distance;
particle.style.left = centerX + 'px';
particle.style.top = centerY + 'px';
particle.style.setProperty('--tx', tx + 'px');
particle.style.setProperty('--ty', ty + 'px');
particle.style.animation = `float-up ${0.6 + Math.random() * 0.4}s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards`;
document.body.appendChild(particle);
// Remove particle after animation
setTimeout(() => particle.remove(), 1000);
}
// Add "+1" floating text
const plusOne = document.createElement('div');
plusOne.textContent = '+1';
plusOne.style.position = 'fixed';
plusOne.style.left = centerX + 'px';
plusOne.style.top = centerY + 'px';
plusOne.style.fontSize = '24px';
plusOne.style.fontWeight = 'bold';
plusOne.style.color = '#ff4458';
plusOne.style.pointerEvents = 'none';
plusOne.style.animation = 'float-up 1s ease-out forwards';
plusOne.style.setProperty('--tx', '0px');
plusOne.style.setProperty('--ty', '-80px');
document.body.appendChild(plusOne);
setTimeout(() => plusOne.remove(), 1000);
}
</script>
</body>
</html>