Exploding like buttonOne-line

Nemotron 3.5 Lightning (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: 37.7 s
Cost: $0
Output tokens: 2,237
Spent thinking: 0 tokens
Speed: 59.9 tok/s
Console errors: 0

First token after: 333 ms
First visible text after: 333 ms
Prompt tokens: 375
Code size: 7.1 KB
Finish reason: stop
Served by: Nvidia
Model id: nvidia/nemotron-3.5-lightning: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 · 255 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>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { 
      min-height: 100vh; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      background: #0a0a0f; 
      font-family: 'Segoe UI', Tahoma, Arial, sans-serif; 
    }
    .like-btn {
      position: relative;
      padding: 16px 32px;
      font-size: 1.2rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      background: linear-gradient(135deg, #ff6b6b, #ee5a24);
      color: white;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      overflow: visible;
      transition: transform 0.1s ease, box-shadow 0.1s ease;
      z-index: 1;
    }
    .like-btn::before {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 38px;
      border: 2px solid currentColor;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .like-btn:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
    }
    .like-btn:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 4px;
    }
    .like-btn:active {
      transform: translateY(2px) scale(0.98);
    }
    .like-btn.animating {
      animation: pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    @keyframes pop {
      0% { transform: scale(1); }
      50% { transform: scale(1.15) rotate(-5deg); }
      100% { transform: scale(1.1) rotate(2deg); }
    }
    .like-btn .like-count {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #ffd93d;
      color: #111;
      font-size: 0.7rem;
      font-weight: 700;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      opacity: 0;
      transform: scale(0);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .like-btn:hover .like-count {
      opacity: 1;
      transform: scale(1);
    }
    .pulse-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 2px solid rgba(255, 107, 107, 0.5);
      opacity: 0;
      animation: pulse-ring 0.6s cubic-bezier(0.47, 0, 0.74, 0.71) forwards;
    }
    @keyframes pulse-ring {
      0% { transform: scale(1); opacity: 0.8; }
      100% { transform: scale(1.6); opacity: 0; }
    }
    .sparkles {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .sparkle {
      position: absolute;
      width: 8px;
      height: 8px;
      background: #fff;
      border-radius: 50%;
      opacity: 0;
      animation: sparkle 0.5s ease-out forwards;
    }
    @keyframes sparkle {
      0% { opacity: 1; transform: scale(1) translate(-50%, -50%); }
      100% { opacity: 0; transform: scale(2) translate(-50%, -50%); }
    }
    .confetti {
      position: absolute;
      width: 10px;
      height: 10px;
      background: random() > 0.5 ? #ff6b6b : #ee5a24;
      border-radius: 2px;
      opacity: 0.9;
      animation: confetti 0.8s ease-out forwards;
    }
    @keyframes confetti {
      0% { transform: translate(0, 0) rotate(0deg); opacity: 0.9; }
      100% { 
        transform: translate(random(200)-100, random(200)-100) rotate(random(360)deg); 
        opacity: 0; 
      }
    }
    @media (max-width: 480px) {
      .like-btn { padding: 14px 24px; font-size: 1rem; }
    }
  </style>
</head>
<body>
  <button class="like-btn" aria-label="Like">
    <span>Like</span>
    <span class="like-count">0</span>
  </button>
  <div class="sparkles"></div>

  <script>
    // No external libraries - pure JS for the animation
    const button = document.querySelector('.like-btn');
    const sparklesContainer = document.querySelector('.sparkles');
    const likeCount = button.querySelector('.like-count');
    let totalLikes = parseInt(likeCount.textContent);

    // Create confetti piece
    function createConfetti(x, y) {
      const confetti = document.createElement('div');
      confetti.className = 'confetti';
      confetti.style.left = x + 'px';
      confetti.style.top = y + 'px';
      confetti.style.background = totalLikes % 2 === 0 ? '#ff6b6b' : '#ee5a24';
      document.body.appendChild(confetti);
      
      setTimeout(() => confetti.remove(), 800);
    }

    // Create sparkle
    function createSparkle(x, y) {
      const sparkle = document.createElement('div');
      sparkle.className = 'sparkle';
      sparkle.style.left = x + 'px';
      sparkle.style.top = y + 'px';
      sparklesContainer.appendChild(sparkle);
      
      setTimeout(() => sparkle.remove(), 500);
    }

    // Pulse ring effect
    function createPulseRing() {
      const ring = document.createElement('div');
      ring.className = 'pulse-ring';
      button.appendChild(ring);
      
      setTimeout(() => ring.remove(), 600);
    }

    // Handle click
    button.addEventListener('click', (e) => {
      e.preventDefault();
      
      // Update count
      totalLikes++;
      likeCount.textContent = totalLikes;
      likeCount.style.opacity = '1';
      likeCount.style.transform = 'scale(1)';

      // Trigger animations
      button.classList.add('animating');
      
      // Create pulse ring
      createPulseRing();

      // Get button rect for sparkle placement
      const rect = button.getBoundingClientRect();
      const centerX = rect.left + rect.width / 2;
      const centerY = rect.top + rect.height / 2;

      // Create sparkles at random positions around button
      for (let i = 0; i < 8; i++) {
        setTimeout(() => {
          const angle = (i / 8) * Math.PI * 2;
          const distance = 30 + Math.random() * 20;
          const sx = centerX + Math.cos(angle) * distance;
          const sy = centerY + Math.sin(angle) * distance;
          createSparkle(sx, sy);
        }, i * 50);
      }

      // Create confetti at button center
      for (let i = 0; i < 12; i++) {
        setTimeout(() => {
          const angle = (i / 12) * Math.PI * 2;
          const speed = 2 + Math.random() * 3;
          const cx = centerX + Math.cos(angle) * (30 + Math.random() * 20);
          const cy = centerY + Math.sin(angle) * (30 + Math.random() * 20);
          createConfetti(cx, cy);
        }, i * 30);
      }

      // Reset count visibility
      setTimeout(() => {
        likeCount.style.opacity = '0';
        likeCount.style.transform = 'scale(0)';
      }, 300);

      // Remove animating class
      setTimeout(() => button.classList.remove('animating'), 300);
    });

    // Hover effect to show count
    button.addEventListener('mouseenter', () => {
      likeCount.style.opacity = '1';
      likeCount.style.transform = 'scale(1)';
    });

    button.addEventListener('mouseleave', () => {
      likeCount.style.opacity = '0';
      likeCount.style.transform = 'scale(0)';
    });

    // Keyboard accessibility
    button.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        button.click();
      }
    });
  </script>
</body>
</html>