Exploding like buttonOne-line

North Mini Code (free)

by CohereReasoningClean

Open in new window

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

How it went

Total time: 8.3 s
Cost: $0
Output tokens: 1,961
Spent thinking: 0 tokens
Speed: 244.5 tok/s
Console errors: 0

First token after: 230 ms
First visible text after: 230 ms
Prompt tokens: 346
Code size: 6.6 KB
Finish reason: stop
Served by: Cohere
Model id: cohere/north-mini-code: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 · 214 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Crazy Like Button</title>
  <style>
    :root {
      --btn-w: 200px;
      --btn-h: 80px;
      --primary: #ff2e63;
      --secondary: #08d9d6;
      --accent: #f9c80e;
      --text: #222;
    }

    * { box-sizing: border-box; }

    body {
      margin:0;
      padding:0;
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(135deg, #1e3c72, #2a5298);
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      overflow: hidden;
    }

    /* Main container for scaling */
    .scene {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 800px;
    }

    .like-wrapper {
      position: relative;
      width: var(--btn-w);
      height: var(--btn-h);
      cursor: pointer;
      transform-style: preserve-3d;
      animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
      50% { transform: translateY(-15px) rotateX(10deg) rotateY(10deg); }
    }

    .like-btn {
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, var(--primary), var(--secondary));
      border: none;
      border-radius: 20px;
      color: #fff;
      font-size: 2rem;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    }

    .like-btn::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 70%);
      opacity: 0;
      transform: rotate(0deg);
      transition: opacity 0.5s, transform 0.5s;
      pointer-events: none;
    }

    .like-wrapper:hover .like-btn {
      transform: scale(1.05);
      box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    }

    /* The hidden checkbox triggers the animation via :checked */
    #like-check {
      display: none;
    }

    /* When checked, trigger crazy animation */
    #like-check:checked ~ .like-btn {
      animation: crazyPulse 0.8s cubic-bezier(.36,1.56,.54,1) forwards;
    }

    @keyframes crazyPulse {
      0%   { transform: scale(1) rotate(0) translate(0,0) skew(0,0); }
      10%  { transform: scale(1.3) rotate(5deg) translate(10px,-10px) skew(5deg,5deg); }
      20%  { transform: scale(0.9) rotate(-5deg) translate(-10px,10px) skew(-5deg,-5deg); }
      30%  { transform: scale(1.2) rotate(3deg) translate(5px,-5px) skew(3deg,3deg); }
      40%  { transform: scale(0.95) rotate(-3deg) translate(-5px,5px) skew(-3deg,-3deg); }
      50%  { transform: scale(1.15) rotate(2deg) translate(8px,-8px) skew(2deg,2deg); }
      60%  { transform: scale(0.98) rotate(-2deg) translate(-8px,8px) skew(-2deg,-2deg); }
      70%  { transform: scale(1.05) rotate(1deg) translate(4px,-4px) skew(1deg,1deg); }
      80%  { transform: scale(0.99) rotate(-1deg) translate(-4px,4px) skew(-1deg,-1deg); }
      90%  { transform: scale(1.02) rotate(0) translate(2px,-2px) skew(0,0); }
      100% { transform: scale(1) rotate(0) translate(0,0) skew(0,0); }
    }

    /* Sparkle burst */
    #like-check:checked ~ .like-btn::before {
      opacity: 1;
      animation: sparkleBurst 0.8s ease-out forwards;
    }

    @keyframes sparkleBurst {
      0% { transform: rotate(0deg) scale(0); opacity: 0; }
      30% { transform: rotate(180deg) scale(1.5); opacity: 0.8; }
      60% { transform: rotate(360deg) scale(1); opacity: 0.5; }
      100%{ transform: rotate(540deg) scale(0); opacity: 0; }
    }

    /* Particle emojis that appear around the button */
    .particle {
      position: absolute;
      font-size: 1.5rem;
      opacity: 0;
      animation: flyOut 0.6s ease-out forwards;
    }

    @keyframes flyOut {
      0% { transform: translate(0,0) scale(0.5); opacity: 0; }
      50% { transform: translate(var(--tx), var(--ty)) scale(1.2); opacity: 1; }
      100% { transform: translate(calc(var(--tx)*2), calc(var(--ty)*2)) scale(0.8); opacity: 0; }
    }

    /* Label under button */
    .label {
      margin-top: 30px;
      font-size: 1.2rem;
      color: #fff;
      text-align: center;
      opacity: 0.9;
    }

    /* Responsive scaling */
    @media (max-width: 600px) {
      .like-wrapper { transform: scale(0.7); }
    }
  </style>
</head>
<body>
<div class="scene">
  <div class="like-wrapper">
    <!-- Hidden checkbox acts as a pure‑CSS trigger -->
    <input type="checkbox" id="like-check">
    <label class="like-btn" for="like-check">
      <span>❤️</span>
      <!-- Dynamically added particles via CSS only -->
    </label>

    <!-- Decorative particles that appear on click (generated by JS to avoid DOM noise) -->
    <script>
      (function() {
        const btn = document.querySelector('.like-btn');
        const wrapper = document.querySelector('.like-wrapper');
        const check = document.getElementById('like-check');

        // Listen for the CSS‑driven checked state change (no JS click)
        // Use MutationObserver on the checkbox's checked attribute
        const observer = new MutationObserver((mutations) => {
          mutations.forEach((m) => {
            if (m.type === 'attributes' && m.attributeName === 'checked') {
              const isChecked = check.hasAttribute('checked');
              if (isChecked) {
                // Fire particle burst
                createParticles();
              }
            }
          });
        });
        observer.observe(check, { attributes: true });

        function createParticles() {
          const emojis = ['✨', '💥', '🌟', '🔥', '🎆', '🪅'];
          for (let i = 0; i < 8; i++) {
            const p = document.createElement('span');
            p.className = 'particle';
            p.textContent = emojis[Math.floor(Math.random() * emojis.length)];
            // random direction
            const angle = (Math.PI * 2 * i) / 8 + (Math.random() - 0.5) * 0.5;
            const dist = 80 + Math.random() * 60;
            p.style.left = '50%';
            p.style.top = '50%';
            p.style.setProperty('--tx', Math.cos(angle) * dist + 'px');
            p.style.setProperty('--ty', Math.sin(angle) * dist + 'px');
            wrapper.appendChild(p);
            // remove after animation
            setTimeout(() => p.remove(), 1000);
          }
        }
      })();
    </script>
  </div>
</div>
<div class="label">Click the button for a crazy CSS animation!</div>
</body>
</html>