Exploding like buttonOne-line

Qwen3.8 Flash

by QwenReasoningClean

Open in new window

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

How it went

Total time: 33.1 s
Cost: $0.0014
Output tokens: 2,851
Spent thinking: 0 tokens
Speed: 88.8 tok/s
Console errors: 0

First token after: 974 ms
First visible text after: 974 ms
Prompt tokens: 375
Code size: 6.9 KB
Finish reason: stop
Served by: Alibaba
Model id: qwen/qwen3.8-flash
Reasoning sent: {"effort":"none"}
Max output: 64,000 tokens
Generated: Nov 11, 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>Pure CSS Like Button</title>
<style>
  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 40%, #2a2340, #16131f 70%);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #e9e6f5;
    overflow-x: hidden;
  }

  .stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    padding: 40px 24px;
    text-align: center;
  }

  h1 {
    margin: 0;
    font-size: clamp(1.3rem, 4vw, 2rem);
    font-weight: 800;
    letter-spacing: .5px;
  }

  p.sub {
    margin: 0;
    opacity: .55;
    font-size: .9rem;
  }

  /* The whole button is a label wrapping a hidden checkbox */
  .like {
    position: relative;
    width: 130px;
    height: 130px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }

  .like input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
  }

  /* ---- Heart (SVG via mask so we can recolor it) ---- */
  .heart {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 78px;
    transform: translate(-50%, -50%) scale(1);
    background: #6b6478;
    transition: background .2s ease;
    -webkit-mask: var(--h) center / contain no-repeat;
            mask: var(--h) center / contain no-repeat;
    --h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 29'%3E%3Cpath d='M16 29S1 18.5 1 9.5A7.5 7.5 0 0 1 16 6a7.5 7.5 0 0 1 15 3.5C31 18.5 16 29 16 29z'/%3E%3C/svg%3E");
  }

  /* ---- Particle ring ---- */
  .burst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 9px;
    height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    opacity: 0;
    transform: rotate(var(--r)) translateY(0) scale(.4);
    background: var(--c);
  }

  /* small sparkle stars for extra chaos */
  .spark {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    opacity: 0;
    transform: rotate(var(--r)) translateY(0) scale(0);
    background: var(--c);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  }

  /* ---- Ripple halo ---- */
  .halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    border-radius: 50%;
    border: 3px solid #ff2d75;
    opacity: 0;
    transform: scale(.2);
    pointer-events: none;
  }

  /* ================= CHECKED STATE ================= */
  .like input:checked ~ .heart {
    background: linear-gradient(160deg, #ff5ea0, #ff2d75 60%, #ff9a3d);
    animation: heartPop .6s cubic-bezier(.3, 1.6, .5, 1) both;
  }

  .like input:checked ~ .halo {
    animation: haloOut .7s ease-out both;
  }

  .like input:checked ~ .burst .dot {
    animation: fly .8s cubic-bezier(.15, .8, .3, 1) both;
  }

  .like input:checked ~ .burst .spark {
    animation: twinkle .9s ease-out both;
  }

  @keyframes heartPop {
    0%   { transform: translate(-50%, -50%) scale(1); }
    25%  { transform: translate(-50%, -50%) scale(.45) rotate(-18deg); }
    55%  { transform: translate(-50%, -50%) scale(1.45) rotate(12deg); }
    75%  { transform: translate(-50%, -50%) scale(.9) rotate(-6deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  }

  @keyframes haloOut {
    0%   { opacity: .9; transform: scale(.2); }
    100% { opacity: 0;  transform: scale(1.9); }
  }

  @keyframes fly {
    0%   { opacity: 0; transform: rotate(var(--r)) translateY(0) scale(.4); }
    15%  { opacity: 1; }
    70%  { opacity: 1; transform: rotate(var(--r)) translateY(-72px) scale(1); }
    100% { opacity: 0; transform: rotate(var(--r)) translateY(-96px) scale(.2); }
  }

  @keyframes twinkle {
    0%   { opacity: 0; transform: rotate(var(--r)) translateY(0) scale(0) rotate(0deg); }
    25%  { opacity: 1; }
    60%  { opacity: 1; transform: rotate(var(--r)) translateY(-58px) scale(1.1) rotate(180deg); }
    100% { opacity: 0; transform: rotate(var(--r)) translateY(-80px) scale(0) rotate(360deg); }
  }

  /* ---- Counter ---- */
  .count {
    position: relative;
    margin-top: 4px;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .5px;
    color: #b7b1c6;
    transition: color .2s ease;
  }

  .count b { font-variant-numeric: tabular-nums; }

  .like input:checked ~ .count {
    color: #ff5ea0;
  }

  /* number swap: two stacked digits driven by checked state */
  .num {
    display: inline-block;
    vertical-align: bottom;
    overflow: hidden;
    height: 1.2em;
  }
  .num span {
    display: block;
    transition: transform .35s cubic-bezier(.3, 1.5, .5, 1);
  }
  .num span:nth-child(1) { transform: translateY(0); }
  .num span:nth-child(2) { transform: translateY(1.2em); }
  .like input:checked ~ .count .num span:nth-child(1) { transform: translateY(-1.2em); }
  .like input:checked ~ .count .num span:nth-child(2) { transform: translateY(0); }

  .hint {
    font-size: .8rem;
    opacity: .4;
  }
</style>
</head>
<body>
  <div class="stage">
    <h1>Tap to Love It 💖</h1>

    <label class="like">
      <input type="checkbox">

      <!-- particle ring: 12 dots + 6 sparkles -->
      <div class="burst">
        <i class="dot" style="--r:0deg;--c:#ff2d75"></i>
        <i class="dot" style="--r:30deg;--c:#ff9a3d"></i>
        <i class="dot" style="--r:60deg;--c:#ffd23d"></i>
        <i class="dot" style="--r:90deg;--c:#5eead4"></i>
        <i class="dot" style="--r:120deg;--c:#60a5fa"></i>
        <i class="dot" style="--r:150deg;--c:#a78bfa"></i>
        <i class="dot" style="--r:180deg;--c:#ff2d75"></i>
        <i class="dot" style="--r:210deg;--c:#ff5ea0"></i>
        <i class="dot" style="--r:240deg;--c:#ff9a3d"></i>
        <i class="dot" style="--r:270deg;--c:#ffd23d"></i>
        <i class="dot" style="--r:300deg;--c:#5eead4"></i>
        <i class="dot" style="--r:330deg;--c:#60a5fa"></i>

        <i class="spark" style="--r:15deg;--c:#fff"></i>
        <i class="spark" style="--r:75deg;--c:#ffd23d"></i>
        <i class="spark" style="--r:135deg;--c:#fff"></i>
        <i class="spark" style="--r:195deg;--c:#ff9a3d"></i>
        <i class="spark" style="--r:255deg;--c:#fff"></i>
        <i class="spark" style="--r:315deg;--c:#a78bfa"></i>
      </div>

      <div class="halo"></div>
      <div class="heart"></div>

      <div class="count"><span class="num"><span>128</span><span>129</span></span> likes</div>
    </label>

    <p class="sub">Pure CSS · no JavaScript · click again to reset the explosion.</p>
    <p class="hint">The counter rolls over as the burst fires 🎉</p>
  </div>
</body>
</html>