Exploding like buttonOne-line

Nemotron 3 Ultra (free)

by NVIDIAReasoningClean

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 1 min 27 s
Cost: $0
Output tokens: 6,222
Spent thinking: 326 tokens
Speed: 80.8 tok/s
Console errors: 0

First token after: 10.3 s
First visible text after: 19.1 s
Prompt tokens: 375
Code size: 15.8 KB
Finish reason: stop
Served by: Nvidia
Model id: nvidia/nemotron-3-ultra-550b-a55b:free
Reasoning sent: {"effort":"high"}
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 · 490 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</title>
<style>
  :root {
    --bg: #0d0d12;
    --heart-outline: #e8e8f0;
    --heart-filled: #ff2d55;
    --sparkle: #ffd700;
    --particle-1: #ff6b9d;
    --particle-2: #ffd700;
    --particle-3: #7cf0ff;
    --particle-4: #b87cff;
    --particle-5: #ff7c4a;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    font-family: 'Segoe UI', system-ui, sans-serif;
    overflow-x: hidden;
    padding: 2rem;
  }

  h1 {
    color: var(--heart-outline);
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 3rem;
    opacity: 0.6;
    animation: fadeInUp 1s ease-out;
  }

  .like-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  /* Hidden checkbox for state */
  #like-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* The visible button */
  .like-btn {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .like-btn:focus-visible {
    outline: 2px solid var(--sparkle);
    outline-offset: 8px;
    border-radius: 50%;
  }

  /* Heart shape using pseudo-elements */
  .heart {
    position: relative;
    width: 100%;
    height: 100%;
    transform: rotate(-45deg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .heart::before,
  .heart::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--heart-outline);
    border-radius: 50%;
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }

  .heart::before {
    top: -50%;
    left: 0;
    box-shadow: 
      0 0 0 2px var(--heart-outline),
      0 0 20px rgba(255, 45, 85, 0);
  }

  .heart::after {
    top: 0;
    left: -50%;
    box-shadow: 
      0 0 0 2px var(--heart-outline),
      0 0 20px rgba(255, 45, 85, 0);
  }

  /* Hover state */
  .like-btn:hover .heart {
    transform: rotate(-45deg) scale(1.15);
  }

  .like-btn:hover .heart::before,
  .like-btn:hover .heart::after {
    box-shadow: 
      0 0 0 2px var(--heart-outline),
      0 0 30px rgba(255, 45, 85, 0.4);
  }

  /* Active/click press */
  .like-btn:active .heart {
    transform: rotate(-45deg) scale(0.9);
    transition: transform 0.05s;
  }

  /* CHECKED STATE - The crazy animation */
  #like-toggle:checked + .like-btn .heart {
    transform: rotate(-45deg) scale(1.2);
  }

  #like-toggle:checked + .like-btn .heart::before,
  #like-toggle:checked + .like-btn .heart::after {
    background: var(--heart-filled);
    box-shadow: 
      0 0 0 2px var(--heart-filled),
      0 0 40px var(--heart-filled),
      0 0 80px var(--heart-filled);
    animation: heartBeat 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* Particle explosion container */
  .particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
  }

  .particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  /* 20 particles with different colors and directions */
  .particle:nth-child(1)  { background: var(--particle-1); --angle: 0deg;    --dist: 180px; --delay: 0.00s; --shape: 50%; }
  .particle:nth-child(2)  { background: var(--particle-2); --angle: 18deg;   --dist: 200px; --delay: 0.03s; --shape: 30% 70%; }
  .particle:nth-child(3)  { background: var(--particle-3); --angle: 36deg;   --dist: 170px; --delay: 0.06s; --shape: 50%; }
  .particle:nth-child(4)  { background: var(--particle-4); --angle: 54deg;   --dist: 210px; --delay: 0.09s; --shape: 20% 80%; }
  .particle:nth-child(5)  { background: var(--particle-5); --angle: 72deg;   --dist: 160px; --delay: 0.12s; --shape: 50%; }
  .particle:nth-child(6)  { background: var(--sparkle);  --angle: 90deg;   --dist: 190px; --delay: 0.15s; --shape: 50%; }
  .particle:nth-child(7)  { background: var(--particle-1); --angle: 108deg;  --dist: 180px; --delay: 0.02s; --shape: 40% 60%; }
  .particle:nth-child(8)  { background: var(--particle-2); --angle: 126deg;  --dist: 220px; --delay: 0.05s; --shape: 50%; }
  .particle:nth-child(9)  { background: var(--particle-3); --angle: 144deg;  --dist: 150px; --delay: 0.08s; --shape: 50%; }
  .particle:nth-child(10) { background: var(--particle-4); --angle: 162deg;  --dist: 200px; --delay: 0.11s; --shape: 30% 70%; }
  .particle:nth-child(11) { background: var(--particle-5); --angle: 180deg;  --dist: 170px; --delay: 0.14s; --shape: 50%; }
  .particle:nth-child(12) { background: var(--sparkle);  --angle: 198deg;  --dist: 190px; --delay: 0.01s; --shape: 50%; }
  .particle:nth-child(13) { background: var(--particle-1); --angle: 216deg;  --dist: 160px; --delay: 0.04s; --shape: 50%; }
  .particle:nth-child(14) { background: var(--particle-2); --angle: 234deg;  --dist: 210px; --delay: 0.07s; --shape: 50%; }
  .particle:nth-child(15) { background: var(--particle-3); --angle: 252deg;  --dist: 180px; --delay: 0.10s; --shape: 50%; }
  .particle:nth-child(16) { background: var(--particle-4); --angle: 270deg;  --dist: 220px; --delay: 0.13s; --shape: 50%; }
  .particle:nth-child(17) { background: var(--particle-5); --angle: 288deg;  --dist: 150px; --delay: 0.03s; --shape: 50%; }
  .particle:nth-child(18) { background: var(--sparkle);  --angle: 306deg;  --dist: 190px; --delay: 0.06s; --shape: 50%; }
  .particle:nth-child(19) { background: var(--particle-1); --angle: 324deg;  --dist: 200px; --delay: 0.09s; --shape: 50%; }
  .particle:nth-child(20) { background: var(--particle-2); --angle: 342deg;  --dist: 170px; --delay: 0.12s; --shape: 50%; }

  /* Particle explosion animation */
  #like-toggle:checked + .like-btn .particles .particle {
    animation: 
      particleExplode 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
      particleFade 0.8s ease-out var(--delay) forwards,
      particleSpin 0.8s linear var(--delay) forwards;
    border-radius: var(--shape);
  }

  /* Ring shockwave */
  .shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    border: 3px solid var(--heart-filled);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
  }

  .shockwave:nth-child(1) { --delay: 0.05s; --max-scale: 3; }
  .shockwave:nth-child(2) { --delay: 0.15s; --max-scale: 4.5; border-color: var(--sparkle); }
  .shockwave:nth-child(3) { --delay: 0.25s; --max-scale: 6; border-color: var(--particle-3); border-width: 2px; }

  #like-toggle:checked + .like-btn .shockwave {
    animation: shockwaveExpand 1s ease-out var(--delay) forwards;
  }

  /* Floating hearts */
  .float-hearts {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    width: 1px;
    height: 1px;
  }

  .float-heart {
    position: absolute;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%) rotate(-45deg) scale(0);
    opacity: 0;
  }

  .float-heart::before,
  .float-heart::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--heart-filled);
    border-radius: 50%;
  }

  .float-heart::before { top: -50%; left: 0; }
  .float-heart::after { top: 0; left: -50%; }

  .float-heart:nth-child(1)  { --tx: -120px; --ty: -80px;  --rot: -30deg; --delay: 0.2s; --size: 24px; --dur: 1.2s; }
  .float-heart:nth-child(2)  { --tx: 100px;  --ty: -100px; --rot: 20deg;  --delay: 0.25s; --size: 18px; --dur: 1.4s; }
  .float-heart:nth-child(3)  { --tx: -140px; --ty: 40px;   --rot: -45deg; --delay: 0.3s; --size: 20px; --dur: 1.1s; }
  .float-heart:nth-child(4)  { --tx: 130px;  --ty: 60px;   --rot: 35deg;  --delay: 0.35s; --size: 22px; --dur: 1.3s; }
  .float-heart:nth-child(5)  { --tx: -60px;  --ty: -140px; --rot: -15deg; --delay: 0.4s; --size: 16px; --dur: 1.5s; }
  .float-heart:nth-child(6)  { --tx: 80px;   --ty: -130px; --rot: 40deg;  --delay: 0.45s; --size: 20px; --dur: 1.2s; }

  #like-toggle:checked + .like-btn .float-hearts .float-heart {
    animation: floatUp var(--dur) ease-out var(--delay) forwards;
    width: var(--size);
    height: var(--size);
  }

  /* Count display */
  .like-count {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--heart-outline);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: fadeInUp 1s ease-out 0.2s both;
  }

  #like-toggle:checked ~ .like-count {
    color: var(--heart-filled);
    animation: countPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .like-label {
    color: var(--heart-outline);
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    opacity: 0.5;
    animation: fadeInUp 1s ease-out 0.3s both;
  }

  /* Screen flash */
  .screen-flash {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,45,85,0.15), transparent 70%);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }

  #like-toggle:checked ~ .screen-flash {
    animation: screenFlash 0.4s ease-out;
  }

  /* ===== KEYFRAMES ===== */

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes heartBeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.3); }
    30% { transform: scale(0.95); }
    45% { transform: scale(1.15); }
    60% { transform: scale(1); }
    75% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }

  @keyframes particleExplode {
    0% { transform: translate(-50%, -50%) scale(0); }
    50% { transform: translate(calc(-50% + cos(var(--angle)) * var(--dist) * 0.5), calc(-50% + sin(var(--angle)) * var(--dist) * 0.5)) scale(1.5); }
    100% { transform: translate(calc(-50% + cos(var(--angle)) * var(--dist)), calc(-50% + sin(var(--angle)) * var(--dist))) scale(1); }
  }

  @keyframes particleFade {
    0% { opacity: 1; filter: brightness(2); }
    100% { opacity: 0; filter: brightness(0.5); }
  }

  @keyframes particleSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(0); }
    100% { transform: translate(calc(-50% + cos(var(--angle)) * var(--dist)), calc(-50% + sin(var(--angle)) * var(--dist))) rotate(720deg) scale(1); }
  }

  @keyframes shockwaveExpand {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 4px; }
    100% { transform: translate(-50%, -50%) scale(var(--max-scale)); opacity: 0; border-width: 0; }
  }

  @keyframes floatUp {
    0% { transform: translate(-50%, -50%) rotate(-45deg) scale(0); opacity: 0; }
    15% { transform: translate(-50%, -50%) rotate(-45deg) scale(1.2); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)) scale(0.3); opacity: 0; }
  }

  @keyframes countPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1); }
  }

  @keyframes screenFlash {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* UNCHECKED - Reverse animations */
  #like-toggle:not(:checked) + .like-btn .heart::before,
  #like-toggle:not(:checked) + .like-btn .heart::after {
    animation: heartUnfill 0.4s ease forwards;
  }

  @keyframes heartUnfill {
    0% { background: var(--heart-filled); box-shadow: 0 0 0 2px var(--heart-filled), 0 0 40px var(--heart-filled); }
    100% { background: var(--heart-outline); box-shadow: 0 0 0 2px var(--heart-outline), 0 0 20px rgba(255, 45, 85, 0); }
  }

  #like-toggle:not(:checked) + .like-btn .particles .particle {
    animation: particleImplode 0.5s ease-in forwards;
  }

  @keyframes particleImplode {
    0% { transform: translate(calc(-50% + cos(var(--angle)) * var(--dist)), calc(-50% + sin(var(--angle)) * var(--dist))) scale(1); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  }

  #like-toggle:not(:checked) + .like-btn .float-hearts .float-heart {
    animation: floatDown 0.4s ease-in forwards;
  }

  @keyframes floatDown {
    0% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)) scale(0.3); opacity: 0; }
    100% { transform: translate(-50%, -50%) rotate(-45deg) scale(0); opacity: 0; }
  }

  #like-toggle:not(:checked) + .like-btn .shockwave {
    animation: shockwaveCollapse 0.3s ease-in forwards;
  }

  @keyframes shockwaveCollapse {
    0% { transform: translate(-50%, -50%) scale(var(--max-scale)); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Responsive */
  @media (max-width: 480px) {
    .like-btn { width: 80px; height: 80px; }
    .particle { width: 10px; height: 10px; }
  }
</style>
</head>
<body>
  <h1>Pure CSS Like Button</h1>
  
  <div class="like-wrapper">
    <input type="checkbox" id="like-toggle" role="switch" aria-label="Like">
    
    <label class="like-btn" for="like-toggle" tabindex="0">
      <div class="heart"></div>
      <div class="particles" aria-hidden="true">
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
        <span class="particle"></span>
      </div>
      <div class="shockwave" aria-hidden="true"></div>
      <div class="shockwave" aria-hidden="true"></div>
      <div class="shockwave" aria-hidden="true"></div>
      <div class="float-hearts" aria-hidden="true">
        <span class="float-heart"></span>
        <span class="float-heart"></span>
        <span class="float-heart"></span>
        <span class="float-heart"></span>
        <span class="float-heart"></span>
        <span class="float-heart"></span>
      </div>
    </label>

    <div class="like-count" aria-live="polite">0</div>
    <div class="like-label">likes</div>
  </div>

  <div class="screen-flash" aria-hidden="true"></div>

  <script>
    // Only for updating the count display - no animation logic
    const toggle = document.getElementById('like-toggle');
    const countEl = document.querySelector('.like-count');
    
    // Initialize count from a "server" value
    let count = 42;
    countEl.textContent = count;
    
    toggle.addEventListener('change', () => {
      count += toggle.checked ? 1 : -1;
      // Animate the number change
      countEl.style.transform = 'scale(1.3)';
      countEl.textContent = count;
      setTimeout(() => countEl.style.transform = 'scale(1)', 150);
    });
    
    // Keyboard support for the label (checkbox hack handles click)
    document.querySelector('.like-btn').addEventListener('keydown', (e) => {
      if (e.key === ' ' || e.key === 'Enter') {
        e.preventDefault();
        toggle.click();
      }
    });
  </script>
</body>
</html>

Reasoning trace (326 tokens)

The user wants a "like" button in pure CSS with a crazy animation when clicked. No JavaScript allowed. I need to create a visually impressive animation using only CSS.

Key requirements:
- Pure CSS (no JS)
- Crazy animation on click
- Must work in 1280x800 and down to 375px
- No horizontal scrollbar
- Meaningful content on first paint
- Self-contained HTML with inline CSS

For a "click" animation in pure CSS, I can use the `:active` pseudo-class for the click moment, and `:focus` for after click. But to have a persistent "liked" state without JS, I can use a checkbox hack (hidden checkbox + label).

Let me create an impressive animation:
- Heart shape that transforms
- Particle explosion
- Color transition
- Scale/bounce effects
- Maybe some pseudo-elements for particles

I'll use a checkbox hack:
- Hidden checkbox
- Label as the button
- When checked, trigger animations

For the "crazy" animation, I'll do:
1. Heart beats and grows
2. Particles explode outward (using multiple pseudo-elements or box-shadow tricks)
3. Color changes from outline to filled red
4. Screen shake or rotation
5. Confetti-like particles

Since I can't create many elements without HTML, I'll use:
- The main heart element
- ::before and ::after for additional particles
- box-shadow for multiple particles
- keyframe animations triggered by :checked

Let me design this carefully.