Exploding like buttonOne-line

Mistral Small 4

by MistralReasoningClean

Open in new window

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

How it went

Total time: 6.3 s
Cost: $0.0008
Output tokens: 1,257
Spent thinking: 0 tokens
Speed: 217 tok/s
Console errors: 0

First token after: 478 ms
First visible text after: 478 ms
Prompt tokens: 376
Code size: 4.0 KB
Finish reason: stop
Served by: Mistral
Model id: mistralai/mistral-small-2603
Reasoning sent: {"effort":"none"}
Max output: 209,715 tokens
Generated: Nov 12, 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 · 186 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure CSS Like Button</title>
  <style>
    :root {
      --heart-size: 24px;
      --heart-color: #e74c3c;
      --heart-bg: #fff;
      --heart-border: 1px solid #e74c3c;
      --like-color: #333;
      --like-font: 'Arial', sans-serif;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      font-family: var(--like-font);
      cursor: pointer;
    }

    .like-button {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 120px;
      height: 40px;
      background: var(--heart-bg);
      border-radius: 20px;
      border: none;
      outline: none;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      cursor: pointer;
      overflow: hidden;
      padding: 0 20px;
    }

    .like-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .like-button:active {
      transform: translateY(0);
    }

    .heart {
      position: absolute;
      left: 10px;
      width: var(--heart-size);
      height: var(--heart-size);
      background: var(--heart-bg);
      border: var(--heart-border);
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      transform: rotate(-45deg);
      transition: all 0.5s ease;
      z-index: 1;
    }

    .heart::before,
    .heart::after {
      content: '';
      position: absolute;
      width: var(--heart-size);
      height: var(--heart-size);
      background: var(--heart-bg);
      border: var(--heart-border);
      border-radius: 50%;
      z-index: -1;
    }

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

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

    .like-button.liked .heart {
      background: var(--heart-color);
      border-color: var(--heart-color);
      animation: pulse 0.5s ease;
    }

    .like-button.liked .heart::before,
    .like-button.liked .heart::after {
      background: var(--heart-color);
      border-color: var(--heart-color);
    }

    .like-text {
      color: var(--like-color);
      font-weight: bold;
      font-size: 16px;
      transition: all 0.3s ease;
      z-index: 2;
    }

    .like-button.liked .like-text {
      color: var(--heart-color);
      animation: textShake 0.5s ease;
    }

    @keyframes pulse {
      0% {
        transform: rotate(-45deg) scale(1);
      }
      50% {
        transform: rotate(-45deg) scale(1.2);
      }
      100% {
        transform: rotate(-45deg) scale(1);
      }
    }

    @keyframes textShake {
      0%, 100% {
        transform: translateX(0);
      }
      25% {
        transform: translateX(-5px);
      }
      75% {
        transform: translateX(5px);
      }
    }

    .particles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 3;
    }

    .particle {
      position: absolute;
      background: var(--heart-color);
      border-radius: 50%;
      opacity: 0;
      pointer-events: none;
    }

    .like-button.liked .particle {
      animation: particleExplosion 1s ease-out;
    }

    @keyframes particleExplosion {
      0% {
        opacity: 1;
        transform: scale(0) translate(0, 0);
      }
      100% {
        opacity: 0;
        transform: scale(1) translate(var(--tx, 0), var(--ty, 0));
      }
    }
  </style>
</head>
<body>
  <button class="like-button">
    <div class="heart"></div>
    <span class="like-text">Like</span>
    <div class="particles" id="particles"></div>
  </button>

  <script>
    // Pure CSS solution doesn't need JavaScript, but we need to handle the click
    // Since we can't use JS, we'll use the :active pseudo-class for the click effect
    // The crazy animation is achieved entirely with CSS animations triggered by the :active state
  </script>
</body>
</html>