Exploding like buttonOne-line
Nemotron 3 Ultra (free)
by NVIDIAReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 15 s
- Cost
- $0
- Output tokens
- 6,732
- Spent thinking
- 0 tokens
- Speed
- 94 tok/s
- Console errors
- 0
- First token after
- 3.2 s
- First visible text after
- 3.2 s
- Prompt tokens
- 375
- Code size
- 17.4 KB
- Finish reason
- stop
- Served by
- Nvidia
- Model id
nvidia/nemotron-3-ultra-550b-a55b:free- Reasoning sent
{"effort":"none"}- Max output
- 32,000 tokens
- Generated
- Nov 9, 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 · 530 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 - Pure CSS</title>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=Outfit:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0a0f1a;
--fg: #e8edf5;
--muted: #5a6a85;
--accent: #ff3366;
--accent-glow: #ff6b9d;
--card: #131b2e;
--border: #253048;
--gold: #ffd700;
--cyan: #00f0ff;
--purple: #b86bff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
@keyframes bgShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes floatUp {
0% { transform: translateY(0) scale(1); opacity: 1; }
100% { transform: translateY(-120vh) scale(0.3); opacity: 0; }
}
@keyframes pulseGlow {
0%, 100% { box-shadow: 0 0 20px rgba(255,51,102,0.3), 0 0 40px rgba(255,51,102,0.15); }
50% { box-shadow: 0 0 40px rgba(255,51,102,0.5), 0 0 80px rgba(255,51,102,0.3); }
}
@keyframes heartBeat {
0%, 100% { transform: scale(1); }
15% { transform: scale(1.25); }
30% { transform: scale(0.95); }
45% { transform: scale(1.15); }
60% { transform: scale(1); }
}
@keyframes ringExpand {
0% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(3); opacity: 0; }
}
@keyframes particleBurst {
0% { transform: translate(0, 0) scale(1); opacity: 1; }
100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
@keyframes textPop {
0% { transform: scale(0) rotate(-180deg); opacity: 0; }
50% { transform: scale(1.3) rotate(10deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes counterRoll {
0% { transform: translateY(100%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-2px); }
80% { transform: translateX(2px); }
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--bg);
color: var(--fg);
font-family: 'Outfit', sans-serif;
overflow: hidden;
position: relative;
}
body::before {
content: '';
position: fixed;
inset: -50%;
background:
radial-gradient(ellipse 80% 50% at 20% 20%, rgba(255,51,102,0.12) 0%, transparent 50%),
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(184,107,255,0.1) 0%, transparent 50%),
radial-gradient(ellipse 50% 30% at 50% 50%, rgba(0,240,255,0.06) 0%, transparent 60%);
animation: bgShift 20s ease-in-out infinite;
pointer-events: none;
}
body::after {
content: '';
position: fixed;
inset: 0;
background-image:
radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 40px 70px, rgba(255,107,157,0.3), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(0,240,255,0.3), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(184,107,255,0.3), transparent),
radial-gradient(1px 1px at 160px 30px, rgba(255,215,0,0.4), transparent);
background-size: 200px 100px;
animation: bgShift 30s linear infinite;
opacity: 0.15;
pointer-events: none;
}
.container {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
padding: 2rem;
}
.label {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.5rem, 4vw, 2.5rem);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
background: linear-gradient(135deg, var(--fg) 0%, var(--accent-glow) 50%, var(--cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
}
.sub-label {
color: var(--muted);
font-size: 0.95rem;
text-align: center;
max-width: 300px;
line-height: 1.5;
}
/* The Button System */
.like-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
/* Hidden checkbox for state */
#like-toggle {
position: absolute;
opacity: 0;
pointer-events: none;
}
.like-button {
position: relative;
width: 140px;
height: 140px;
border: none;
border-radius: 50%;
background:
linear-gradient(145deg, var(--card) 0%, #0d1322 100%),
radial-gradient(circle at 30% 30%, rgba(255,51,102,0.15) 0%, transparent 60%);
box-shadow:
0 0 0 2px var(--border),
0 10px 30px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.05),
0 0 60px rgba(255,51,102,0);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition:
box-shadow 0.3s ease,
transform 0.1s ease,
background 0.3s ease;
animation: pulseGlow 3s ease-in-out infinite;
}
.like-button:hover {
transform: scale(1.05);
box-shadow:
0 0 0 2px var(--accent),
0 15px 40px rgba(0,0,0,0.6),
inset 0 1px 0 rgba(255,255,255,0.1),
0 0 80px rgba(255,51,102,0.4);
}
.like-button:active {
transform: scale(0.95);
}
.like-button:focus-visible {
outline: none;
box-shadow:
0 0 0 3px var(--cyan),
0 0 0 6px var(--bg),
0 15px 40px rgba(0,0,0,0.6),
0 0 80px rgba(255,51,102,0.4);
}
/* Heart SVG */
.heart {
width: 60px;
height: 60px;
fill: var(--border);
stroke: var(--muted);
stroke-width: 1.5;
transition:
fill 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
stroke 0.3s ease,
transform 0.1s ease;
transform-origin: center center;
filter: drop-shadow(0 0 0 transparent);
}
.like-button:hover .heart {
stroke: var(--accent);
transform: scale(1.1);
}
/* CHECKED STATE - THE CRAZY ANIMATION */
#like-toggle:checked + .like-button {
animation: none;
background:
linear-gradient(145deg, #2a0d1a 0%, #1a0510 100%),
radial-gradient(circle at 30% 30%, rgba(255,51,102,0.4) 0%, transparent 60%);
box-shadow:
0 0 0 2px var(--accent),
0 20px 60px rgba(255,51,102,0.4),
inset 0 1px 0 rgba(255,107,157,0.3),
0 0 100px rgba(255,51,102,0.6);
}
#like-toggle:checked + .like-button .heart {
fill: var(--accent);
stroke: var(--accent-glow);
stroke-width: 2;
animation: heartBeat 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
filter: drop-shadow(0 0 20px rgba(255,51,102,0.8)) drop-shadow(0 0 40px rgba(255,51,102,0.5));
}
/* Expanding rings */
.ring {
position: absolute;
border-radius: 50%;
border: 3px solid var(--accent);
opacity: 0;
pointer-events: none;
}
.ring-1 { width: 140px; height: 140px; }
.ring-2 { width: 160px; height: 160px; animation-delay: 0.1s; }
.ring-3 { width: 180px; height: 180px; animation-delay: 0.2s; border-color: var(--cyan); }
.ring-4 { width: 200px; height: 200px; animation-delay: 0.3s; border-color: var(--gold); }
#like-toggle:checked + .like-button .ring {
animation: ringExpand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* Particles */
.particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
}
.particle {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
opacity: 0;
pointer-events: none;
transform-origin: center center;
}
.particle::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: currentColor;
filter: blur(1px);
}
/* Generate 20 particles with different trajectories */
@for $i from 1 through 20 {
.particle-#{$i} {
--angle: #{random(360)}deg;
--dist: #{80 + random(120)}px;
--tx: calc(cos(var(--angle)) * var(--dist));
--ty: calc(sin(var(--angle)) * var(--dist));
--delay: #{random(100) / 100}s;
--dur: #{0.6 + random(40) / 100}s;
--color: #{nth((#ff3366, #ff6b9d, #ffd700, #00f0ff, #b86bff, #ff4757), random(6))};
left: 50%; top: 50%;
margin: -6px 0 0 -6px;
color: var(--color);
}
}
/* Since CSS @for doesn't work in browser, we'll define key particles manually */
.particle-1 { --tx: 120px; --ty: -80px; --delay: 0.00s; --dur: 0.7s; color: #ff3366; }
.particle-2 { --tx: -110px; --ty: -90px; --delay: 0.03s; --dur: 0.8s; color: #ff6b9d; }
.particle-3 { --tx: 140px; --ty: 20px; --delay: 0.05s; --dur: 0.6s; color: #ffd700; }
.particle-4 { --tx: -130px; --ty: 40px; --delay: 0.02s; --dur: 0.9s; color: #00f0ff; }
.particle-5 { --tx: 60px; --ty: -130px; --delay: 0.04s; --dur: 0.7s; color: #b86bff; }
.particle-6 { --tx: -70px; --ty: -120px; --delay: 0.01s; --dur: 0.8s; color: #ff3366; }
.particle-7 { --tx: 150px; --ty: 60px; --delay: 0.06s; --dur: 0.6s; color: #ff6b9d; }
.particle-8 { --tx: -140px; --ty: -20px; --delay: 0.03s; --dur: 0.9s; color: #ffd700; }
.particle-9 { --tx: 20px; --ty: -150px; --delay: 0.02s; --dur: 0.7s; color: #00f0ff; }
.particle-10 { --tx: -30px; --ty: -140px; --delay: 0.05s; --dur: 0.8s; color: #b86bff; }
.particle-11 { --tx: 100px; --ty: 100px; --delay: 0.07s; --dur: 0.6s; color: #ff3366; }
.particle-12 { --tx: -100px; --ty: 110px; --delay: 0.04s; --dur: 0.9s; color: #ff6b9d; }
.particle-13 { --tx: 160px; --ty: -40px; --delay: 0.01s; --dur: 0.7s; color: #ffd700; }
.particle-14 { --tx: -150px; --ty: 30px; --delay: 0.06s; --dur: 0.8s; color: #00f0ff; }
.particle-15 { --tx: 80px; --ty: -110px; --delay: 0.03s; --dur: 0.6s; color: #b86bff; }
.particle-16 { --tx: -90px; --ty: -100px; --delay: 0.02s; --dur: 0.9s; color: #ff3366; }
.particle-17 { --tx: 110px; --ty: 80px; --delay: 0.05s; --dur: 0.7s; color: #ff6b9d; }
.particle-18 { --tx: -120px; --ty: 70px; --delay: 0.04s; --dur: 0.8s; color: #ffd700; }
.particle-19 { --tx: 40px; --ty: -160px; --delay: 0.01s; --dur: 0.6s; color: #00f0ff; }
.particle-20 { --tx: -50px; --ty: -150px; --delay: 0.03s; --dur: 0.9s; color: #b86bff; }
#like-toggle:checked + .like-button .particle {
animation: particleBurst var(--dur) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay) forwards;
}
/* Floating hearts */
.floating-hearts {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
overflow: visible;
top: 0; left: 0;
}
.float-heart {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%) scale(0);
opacity: 0;
font-size: 24px;
filter: drop-shadow(0 0 10px currentColor);
pointer-events: none;
z-index: 20;
}
.float-heart-1 { --delay: 0.1s; --tx: -100px; color: #ff3366; font-size: 28px; }
.float-heart-2 { --delay: 0.15s; --tx: 110px; color: #ff6b9d; font-size: 22px; }
.float-heart-3 { --delay: 0.2s; --tx: -130px; color: #ffd700; font-size: 32px; }
.float-heart-4 { --delay: 0.25s; --tx: 140px; color: #00f0ff; font-size: 20px; }
.float-heart-5 { --delay: 0.3s; --tx: -60px; color: #b86bff; font-size: 30px; }
.float-heart-6 { --delay: 0.35s; --tx: 70px; color: #ff3366; font-size: 24px; }
#like-toggle:checked + .like-button .float-heart {
animation: floatUp 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--delay) forwards;
}
/* Counter */
.counter {
position: relative;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 2rem;
font-weight: 700;
color: var(--fg);
min-width: 80px;
}
.counter-value {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.counter-value.unliked { transform: translateY(0); opacity: 1; }
.counter-value.liked { transform: translateY(-100%); opacity: 0; }
#like-toggle:checked + .like-button ~ .counter .counter-value.unliked {
transform: translateY(100%);
opacity: 0;
}
#like-toggle:checked + .like-button ~ .counter .counter-value.liked {
transform: translateY(0);
opacity: 1;
animation: counterRoll 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}
.counter-value.liked { color: var(--accent); text-shadow: 0 0 20px rgba(255,51,102,0.6); }
/* Shake on un-like */
#like-toggle:not(:checked) + .like-button:active .heart {
animation: shake 0.3s ease;
}
/* Status text */
.status {
font-size: 0.9rem;
color: var(--muted);
text-align: center;
min-height: 1.5em;
transition: color 0.3s ease, transform 0.3s ease;
}
#like-toggle:checked ~ .status {
color: var(--accent);
transform: scale(1.05);
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Mobile adjustments */
@media (max-width: 480px) {
.like-button { width: 120px; height: 120px; }
.heart { width: 52px; height: 52px; }
.ring-1 { width: 120px; height: 120px; }
.ring-2 { width: 140px; height: 140px; }
.ring-3 { width: 160px; height: 160px; }
.ring-4 { width: 180px; height: 180px; }
.counter { font-size: 1.75rem; }
}
</style>
</head>
<body>
<div class="container">
<h1 class="label">Like Button</h1>
<p class="sub-label">Pure CSS. No JavaScript. Click the heart.</p>
<div class="like-wrapper">
<input type="checkbox" id="like-toggle" role="switch" aria-label="Like">
<label for="like-toggle" class="like-button" aria-hidden="true">
<!-- Heart SVG -->
<svg class="heart" viewBox="0 0 24 24" aria-hidden="true">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
</svg>
<!-- Expanding rings -->
<span class="ring ring-1" aria-hidden="true"></span>
<span class="ring ring-2" aria-hidden="true"></span>
<span class="ring ring-3" aria-hidden="true"></span>
<span class="ring ring-4" aria-hidden="true"></span>
<!-- Particles -->
<div class="particles" aria-hidden="true">
<span class="particle particle-1"></span>
<span class="particle particle-2"></span>
<span class="particle particle-3"></span>
<span class="particle particle-4"></span>
<span class="particle particle-5"></span>
<span class="particle particle-6"></span>
<span class="particle particle-7"></span>
<span class="particle particle-8"></span>
<span class="particle particle-9"></span>
<span class="particle particle-10"></span>
<span class="particle particle-11"></span>
<span class="particle particle-12"></span>
<span class="particle particle-13"></span>
<span class="particle particle-14"></span>
<span class="particle particle-15"></span>
<span class="particle particle-16"></span>
<span class="particle particle-17"></span>
<span class="particle particle-18"></span>
<span class="particle particle-19"></span>
<span class="particle particle-20"></span>
</div>
<!-- Floating hearts -->
<div class="floating-hearts" aria-hidden="true">
<span class="float-heart float-heart-1">♥</span>
<span class="float-heart float-heart-2">♥</span>
<span class="float-heart float-heart-3">♥</span>
<span class="float-heart float-heart-4">♥</span>
<span class="float-heart float-heart-5">♥</span>
<span class="float-heart float-heart-6">♥</span>
</div>
</label>
<div class="counter" aria-live="polite" aria-atomic="true">
<span class="counter-value unliked">1,234</span>
<span class="counter-value liked">1,235</span>
</div>
</div>
<p class="status" id="status-text">Click to like</p>
</div>
<script>
// Only for syncing status text and accessibility - no animation logic
const toggle = document.getElementById('like-toggle');
const statusText = document.getElementById('status-text');
function updateStatus() {
statusText.textContent = toggle.checked ? 'Liked! Click to unlike' : 'Click to like';
}
toggle.addEventListener('change', updateStatus);
// Initialize
updateStatus();
</script>
</body>
</html>