Exploding like buttonOne-line

GLM 5.3

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: 21.4 s
Cost: $0.013
Output tokens: 3,500
Spent thinking: 57 tokens
Speed: 166.2 tok/s
Console errors: 0

First token after: 368 ms
First visible text after: 978 ms
Prompt tokens: 356
Code size: 10.0 KB
Finish reason: stop
Served by: InferenceNet
Model id: z-ai/glm-5.3
Reasoning sent: {"effort":"low"}
Max output: 943,718 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 · 323 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; }

  html, body {
    height: 100%;
    overflow: hidden;
  }

  body {
    display: grid;
    place-items: center;
    background:
      radial-gradient(circle at 20% 20%, #2b1d4e 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, #0f3d3d 0%, transparent 50%),
      #0d0d1a;
    font-family: 'Segoe UI', system-ui, sans-serif;
  }

  /* ============ THE LIKE BUTTON (checkbox hack, zero JS) ============ */
  .like {
    position: relative;
    width: 130px;
    height: 130px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

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

  /* ---------- The main heart / button face ---------- */
  .face {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #2e2e48, #1b1b30);
    border: 2px solid #3d3d63;
    box-shadow:
      0 10px 30px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.08);
    transition: transform .15s ease, border-color .3s;
  }

  .face::after { /* shine */
    content: '';
    position: absolute;
    top: 12%; left: 14%;
    width: 34%; height: 22%;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    filter: blur(3px);
  }

  .heart {
    font-size: 52px;
    line-height: 1;
    color: #6b6b90;
    transition: color .3s, transform .3s;
    filter: grayscale(.7);
  }

  .like:hover .face {
    transform: scale(1.06);
    border-color: #ff4d8d;
  }
  .like:hover .heart {
    color: #ff6b9d;
    filter: grayscale(.2);
  }
  .like:active .face { transform: scale(.92); }

  /* ================== CLICK IT! THE CRAZY PART ================== */
  .like input:checked ~ .face {
    border-color: #ff2e78;
    background: linear-gradient(145deg, #3d1430, #2a0f22);
    animation: faceSpin 1.2s cubic-bezier(.2,.8,.2,1) both;
  }

  .like input:checked ~ .face .heart {
    color: #ff2e6b;
    filter: none;
    animation: heartPop .9s cubic-bezier(.18,1.6,.4,1) both, heartBeat 1.4s 1s infinite;
  }

  @keyframes faceSpin {
    0%   { transform: rotate(0) scale(1); }
    20%  { transform: rotate(180deg) scale(1.25); }
    40%  { transform: rotate(360deg) scale(.9); }
    60%  { transform: rotate(520deg) scale(1.2); }
    80%  { transform: rotate(700deg) scale(1.05); }
    100% { transform: rotate(720deg) scale(1); }
  }

  @keyframes heartPop {
    0%   { transform: scale(.3) rotate(-40deg); }
    50%  { transform: scale(2.1) rotate(15deg); }
    75%  { transform: scale(.8) rotate(-8deg); }
    100% { transform: scale(1) rotate(0); }
  }

  @keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.18); }
    45% { transform: scale(.95); }
    60% { transform: scale(1.12); }
  }

  /* ---------- Ripple ring ---------- */
  .ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid #ff2e78;
    opacity: 0;
    pointer-events: none;
  }
  .like input:checked ~ .ripple {
    animation: rippleOut 1s ease-out both;
  }
  .ripple.r2 { animation-delay: .15s !important; }
  .ripple.r3 { animation-delay: .3s !important; }

  @keyframes rippleOut {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(3.2); opacity: 0; }
  }

  /* ---------- Particle explosion: 16 span children ---------- */
  .particles span {
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    border-radius: 2px;
    opacity: 0;
    pointer-events: none;
  }

  /* scatter each particle in a different direction */
  .particles span:nth-child(1)  { --dx:   0px; --dy:-190px; background:#ff2e78; transform: rotate(0deg); }
  .particles span:nth-child(2)  { --dx:  70px; --dy:-175px; background:#ffd23f; transform: rotate(22deg); }
  .particles span:nth-child(3)  { --dx: 130px; --dy:-135px; background:#3ec1ff; transform: rotate(45deg); }
  .particles span:nth-child(4)  { --dx: 175px; --dy: -70px; background:#7bff2e; transform: rotate(67deg); }
  .particles span:nth-child(5)  { --dx: 190px; --dy:   0px; background:#ff2e78; transform: rotate(90deg); }
  .particles span:nth-child(6)  { --dx: 175px; --dy:  70px; background:#ff8c2e; transform: rotate(112deg); }
  .particles span:nth-child(7)  { --dx: 130px; --dy: 135px; background:#b42eff; transform: rotate(135deg); }
  .particles span:nth-child(8)  { --dx:  70px; --dy: 175px; background:#2effd0; transform: rotate(157deg); }
  .particles span:nth-child(9)  { --dx:   0px; --dy: 190px; background:#ffd23f; transform: rotate(180deg); }
  .particles span:nth-child(10){ --dx: -70px; --dy: 175px; background:#ff2e78; transform: rotate(202deg); }
  .particles span:nth-child(11){ --dx:-130px; --dy: 135px; background:#3ec1ff; transform: rotate(225deg); }
  .particles span:nth-child(12){ --dx:-175px; --dy:  70px; background:#7bff2e; transform: rotate(247deg); }
  .particles span:nth-child(13){ --dx:-190px; --dy:   0px; background:#ff8c2e; transform: rotate(270deg); }
  .particles span:nth-child(14){ --dx:-175px; --dy: -70px; background:#b42eff; transform: rotate(292deg); }
  .particles span:nth-child(15){ --dx:-130px; --dy:-135px; background:#2effd0; transform: rotate(315deg); }
  .particles span:nth-child(16){ --dx: -70px; --dy:-175px; background:#ffd23f; transform: rotate(337deg); }

  .like input:checked ~ .particles span {
    animation: explode .9s cubic-bezier(.1,.7,.3,1) both;
  }
  .like input:checked ~ .particles span:nth-child(2n) { animation-delay: .06s; }
  .like input:checked ~ .particles span:nth-child(3n) { animation-duration: 1.1s; }

  @keyframes explode {
    0% {
      transform: translate(-50%,-50%) scale(1) rotate(0deg);
      opacity: 1;
    }
    60% { opacity: 1; }
    100% {
      transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0) rotate(720deg);
      opacity: 0;
    }
  }

  /* ---------- Floating "+1" bubbles ---------- */
  .plus {
    position: absolute;
    left: 50%; top: 50%;
    font-weight: 800;
    font-size: 26px;
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
  }
  .plus.p1 { color: #ff2e78; }
  .plus.p2 { color: #ffd23f; }
  .plus.p3 { color: #3ec1ff; }

  .like input:checked ~ .plus.p1 { animation: floatUp 1.2s ease-out both; }
  .like input:checked ~ .plus.p2 { animation: floatUp 1.2s .18s ease-out both; }
  .like input:checked ~ .plus.p3 { animation: floatUp 1.2s .36s ease-out both; }

  @keyframes floatUp {
    0%   { transform: translate(-50%,-40%) scale(.4); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(calc(-50% + 90px), calc(-50% - 160px)) scale(1.3) rotate(20deg); opacity: 0; }
  }

  /* ---------- Screen shake + flash ---------- */
  body:has(.like input:checked) {
    animation: shake .55s ease-in-out both;
  }
  body:has(.like input:checked)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,46,120,.35), transparent 60%);
    animation: flash 1s ease-out both;
    pointer-events: none;
  }

  @keyframes shake {
    0%, 100% { transform: translate(0,0) rotate(0); }
    10% { transform: translate(-12px, 8px) rotate(-1.5deg); }
    20% { transform: translate(12px,-10px) rotate(1.5deg); }
    30% { transform: translate(-10px,-8px) rotate(-1deg); }
    40% { transform: translate(10px, 10px) rotate(1deg); }
    50% { transform: translate(-8px, 6px) rotate(-.8deg); }
    60% { transform: translate(8px,-6px) rotate(.8deg); }
    70% { transform: translate(-5px, 4px) rotate(-.4deg); }
    80% { transform: translate(5px,-4px) rotate(.4deg); }
    90% { transform: translate(-2px, 2px) }
  }

  @keyframes flash {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    100% { opacity: 0; }
  }

  /* ---------- Counter label ---------- */
  .label {
    margin-top: 34px;
    text-align: center;
    color: #8a8ab0;
    font-size: 15px;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color .3s;
  }
  .label b {
    color: #ff2e78;
    display: block;
    font-size: 24px;
    margin-top: 6px;
    letter-spacing: 0;
  }

  .wrap { display: flex; flex-direction: column; align-items: center; }

  /* swap text via checkbox sibling selector */
  .label .state-off,
  .label .state-on { display: none; }
  .label .state-off { display: block; }
  body:has(.like input:checked) .label .state-off { display: none; }
  body:has(.like input:checked) .label .state-on  { display: block; }
  body:has(.like input:checked) .label { color: #ffb3cc; }

  /* subtle idle hint pulse so people know to click */
  .hint {
    position: fixed;
    bottom: 28px;
    left: 0; right: 0;
    text-align: center;
    color: #55557a;
    font-size: 13px;
    letter-spacing: .1em;
    animation: hintPulse 2.4s ease-in-out infinite;
  }
  @keyframes hintPulse {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
  }

  @media (max-width: 480px) {
    .like { width: 110px; height: 110px; }
    .heart { font-size: 44px; }
  }
</style>
</head>
<body>

  <div class="wrap">
    <div class="like">
      <input type="checkbox" aria-label="Like">
      <div class="face"><span class="heart">&#10084;&#xFE0F;</span></div>
      <div class="ripple r1"></div>
      <div class="ripple r2"></div>
      <div class="ripple r3"></div>
      <div class="particles">
        <span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span>
        <span></span><span></span><span></span><span></span>
      </div>
      <span class="plus p1">+1</span>
      <span class="plus p2">&#10024;</span>
      <span class="plus p3">&#128150;</span>
    </div>

    <div class="label">
      <span class="state-off">Not liked yet <b>&#128148;</b></span>
      <span class="state-on">LIKED! <b>&#128151; +1</b></span>
    </div>
  </div>

  <div class="hint">click the heart &mdash; it&rsquo;s 100% pure CSS, no JavaScript</div>

</body>
</html>

Reasoning trace (57 tokens)

Use a checkbox hack for the like button. Pure CSS animation on check. Must be pure CSS, no JS per task. Add a hint text. Make it flashy: burst of particles, heart pop, ripple, color confetti — all with CSS animations triggered by :checked.