Exploding like buttonOne-line

GLM 5.3 Flash

by Z.aiReasoningClean

Open in new window

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

How it went

Total time: 12.9 s
Cost: $0.0010
Output tokens: 2,487
Spent thinking: 23 tokens
Speed: 204.6 tok/s
Console errors: 0

First token after: 778 ms
First visible text after: 979 ms
Prompt tokens: 356
Code size: 6.5 KB
Finish reason: stop
Served by: CoreWeave
Model id: z-ai/glm-5.3-flash
Reasoning sent: {"effort":"low"}
Max output: 64,000 tokens
Generated: Nov 10, 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 · 209 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>
  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    background: radial-gradient(circle at 50% 40%, #2b1055, #0d0221 70%);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow-x: hidden;
  }

  h1 {
    color: #fff;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: clamp(14px, 3vw, 20px);
    opacity: .6;
  }

  /* ---- the button ---- */
  .like {
    position: relative;
    display: inline-block;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .like input { display: none; }

  .btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 34px;
    border-radius: 60px;
    background: rgba(255,255,255,.06);
    border: 2px solid rgba(255,255,255,.25);
    color: #eee;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: transform .15s, background .3s, border-color .3s, color .3s;
  }
  .like:active .btn { transform: scale(.92); }

  .heart {
    width: 26px; height: 26px;
    fill: none;
    stroke: #ff5e7a;
    stroke-width: 2;
    transition: fill .2s, transform .2s, stroke .2s;
  }

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

  /* ---- checked / liked state ---- */
  .like input:checked ~ .btn {
    background: linear-gradient(135deg, #ff2d55, #ff7b54);
    border-color: #ff2d55;
    color: #fff;
    animation: likePop .7s cubic-bezier(.2, 2.2, .3, 1) both,
               rumbly .5s linear .1s,
               wiggle .6s ease-in-out .15s;
  }
  .like input:checked ~ .btn .heart {
    fill: #fff;
    stroke: #fff;
    animation: heartBeat 1s ease .1s;
  }

  @keyframes likePop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35) rotate(-4deg); }
    55%  { transform: scale(.85) rotate(3deg); }
    75%  { transform: scale(1.12); }
    100% { transform: scale(1); }
  }
  @keyframes rumbly {
    0%,100% { box-shadow: 0 0 0 0 rgba(255,45,85,0); }
    20%  { box-shadow: 0 0 40px 8px rgba(255,45,85,.8), 0 0 90px 30px rgba(255,120,60,.4); }
    60%  { box-shadow: 0 0 25px 4px rgba(255,45,85,.6); }
  }
  @keyframes wiggle {
    0%,100% { margin-left: 0; }
    20% { margin-left: -8px; }
    40% { margin-left: 7px; }
    60% { margin-left: -5px; }
    80% { margin-left: 3px; }
  }
  @keyframes heartBeat {
    0%,100% { transform: scale(1); }
    25% { transform: scale(1.7); }
    40% { transform: scale(1.1); }
    60% { transform: scale(1.5); }
  }

  /* ---- explosion particles (spans, CSS only) ---- */
  .burst { position: absolute; inset: 0; pointer-events: none; }
  .burst i {
    position: absolute;
    left: 50%; top: 50%;
    width: 10px; height: 10px;
    border-radius: 50%;
    opacity: 0;
    background: var(--c);
  }
  .like input:checked ~ .burst i {
    animation: fly .9s cubic-bezier(.15,.75,.35,1) forwards;
    animation-delay: var(--d);
  }
  @keyframes fly {
    0%   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(0); }
  }

  /* ring shockwave */
  .ring {
    position: absolute; left: 50%; top: 50%;
    width: 30px; height: 30px;
    border: 3px solid #ff2d55;
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(.2);
    opacity: 0;
    pointer-events: none;
  }
  .like input:checked ~ .burst .ring {
    animation: ring .7s ease-out forwards;
  }
  @keyframes ring {
    0%   { opacity: 1; transform: translate(-50%,-50%) scale(.3); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(6); }
  }

  /* flying mini hearts */
  .fheart {
    position: absolute; left: 50%; top: 50%;
    width: 14px; height: 14px;
    background: #ff5e7a;
    opacity: 0;
    pointer-events: none;
    clip-path: path('M7 13 C 2 9, 0 6, 0 4 A 3.5 3.5 0 0 1 7 3 A 3.5 3.5 0 0 1 14 4 C 14 6, 12 9, 7 13 Z');
  }
  .like input:checked ~ .burst .fheart {
    animation: floatHeart 1.2s ease-out forwards;
    animation-delay: var(--d);
  }
  @keyframes floatHeart {
    0%   { opacity: 1; transform: translate(-50%,-50%) scale(.4) rotate(0deg); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-70% + var(--y))) scale(1.4) rotate(var(--r)); }
  }

  /* count text pop */
  .like input:checked ~ .btn .count { animation: countPop .5s ease .05s; }
  @keyframes countPop {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-6px) scale(1.25); }
  }

  .hint { color: rgba(255,255,255,.4); font-size: 14px; letter-spacing: 1px; }
</style>
</head>
<body>
  <h1>Pure CSS &mdash; zero JavaScript</h1>

  <label class="like">
    <input type="checkbox">
    <span class="btn">
      <svg class="heart" viewBox="0 0 24 24">
        <path d="M12 21 C 5 15, 2 11, 2 7.5 A 4.5 4.5 0 0 1 12 5.5 A 4.5 4.5 0 0 1 22 7.5 C 22 11, 19 15, 12 21 Z"/>
      </svg>
      <span class="count">Like</span>
    </span>
    <span class="burst">
      <span class="ring"></span>
      <!-- particles -->
      <i style="--c:#ff2d55; --x:70px;  --y:-60px; --d:.05s"></i>
      <i style="--c:#ffb347; --x:-75px; --y:-50px; --d:.08s"></i>
      <i style="--c:#7cff6b; --x:85px;  --y:40px;  --d:.11s"></i>
      <i style="--c:#6bc1ff; --x:-80px; --y:55px;  --d:.06s"></i>
      <i style="--c:#ff5e7a; --x:0px;   --y:-90px; --d:.13s"></i>
      <i style="--c:#ffd166; --x:0px;   --y:85px;  --d:.09s"></i>
      <i style="--c:#c77dff; --x:110px; --y:-10px; --d:.12s"></i>
      <i style="--c:#4dd0e1; --x:-110px;--y:-15px; --d:.1s"></i>
      <i style="--c:#ff8fab; --x:45px;  --y:75px;  --d:.14s"></i>
      <i style="--c:#ffe066; --x:-45px; --y:-80px; --d:.07s"></i>
      <!-- mini hearts -->
      <span class="fheart" style="--x:60px;  --y:-80px; --r:20deg;  --d:.15s"></span>
      <span class="fheart" style="--x:-70px; --y:-70px; --r:-25deg; --d:.2s"></span>
      <span class="fheart" style="--x:90px;  --y:-30px; --r:35deg;  --d:.25s"></span>
      <span class="fheart" style="--x:-90px; --y:-20px; --r:-15deg; --d:.3s"></span>
      <span class="fheart" style="--x:10px;  --y:-110px;--r:10deg;  --d:.18s"></span>
    </span>
  </label>

  <span class="hint">Click the button &mdash; pure CSS keyframes, checkbox hack only</span>
</body>
</html>

Reasoning trace (23 tokens)

Pure CSS like button with a checkbox hack, crazy animation: heart burst, particles, shake. No JS.