Exploding like buttonOne-line

Muse Ember

by MetaReasoningClean

Open in new window

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

How it went

Total time: 19.0 s
Cost: $0.0041
Output tokens: 8,195
Spent thinking: 2,336 tokens
Speed: 486 tok/s
Console errors: 0

First token after: 2.1 s
First visible text after: 8.9 s
Prompt tokens: 374
Code size: 16.6 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"medium"}
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 · 329 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 — No JavaScript</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:#0d0a23;
    color:#fff;
    overflow-x:hidden;
    min-height:100vh;
  }

  /* ===== BACKGROUND STAGE ===== */
  .stage{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:28px 18px 34px;
    overflow:hidden;
    background:
      radial-gradient(700px 420px at 18% 8%, rgba(255,46,99,.35), transparent 60%),
      radial-gradient(700px 500px at 88% 88%, rgba(124,58,237,.38), transparent 60%),
      radial-gradient(500px 340px at 80% 12%, rgba(255,140,0,.18), transparent 60%),
      linear-gradient(160deg,#120d2e 0%,#1d1345 48%,#0d0a23 100%);
  }
  /* floating ambient hearts */
  .ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .ambient i{
    position:absolute;font-style:normal;color:rgba(255,255,255,.07);
    animation:drift 9s ease-in-out infinite;
  }
  .ambient i:nth-child(1){left:6%;top:18%;font-size:44px;animation-delay:0s}
  .ambient i:nth-child(2){left:88%;top:22%;font-size:30px;animation-delay:1.2s;color:rgba(255,46,99,.16)}
  .ambient i:nth-child(3){left:12%;top:78%;font-size:28px;animation-delay:.6s}
  .ambient i:nth-child(4){right:10%;top:72%;font-size:52px;animation-delay:1.8s;color:rgba(255,255,255,.06)}
  .ambient i:nth-child(5){left:46%;top:6%;font-size:22px;animation-delay:2.4s}
  .ambient i:nth-child(6){left:78%;top:52%;font-size:20px;animation-delay:.3s;color:rgba(255,200,80,.14)}
  @keyframes drift{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-22px) rotate(10deg)}}

  /* rotating rays behind button */
  .rays{
    position:absolute;left:50%;top:52%;width:720px;height:720px;
    transform:translate(-50%,-50%);
    background:repeating-conic-gradient(from 0deg, rgba(255,46,99,.22) 0deg 10deg, transparent 10deg 22deg);
    -webkit-mask-image:radial-gradient(circle, rgba(0,0,0,.9) 0%, transparent 62%);
            mask-image:radial-gradient(circle, rgba(0,0,0,.9) 0%, transparent 62%);
    border-radius:50%;
    opacity:.18;
    animation:spin 26s linear infinite;
    pointer-events:none;
    transition:opacity .5s, width .5s, height .5s;
  }
  @keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

  /* ===== HEADER ===== */
  header{position:relative;z-index:3;text-align:center;max-width:820px}
  .eyebrow{
    display:inline-flex;gap:8px;flex-wrap:wrap;justify-content:center;
    font-size:11px;letter-spacing:.22em;font-weight:800;text-transform:uppercase;
    color:#ffd1dc;
  }
  .eyebrow span{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);padding:6px 11px;border-radius:999px;backdrop-filter:blur(6px)}
  .eyebrow b{color:#ff2e63}
  h1{
    margin-top:16px;
    font-size:clamp(38px,7.2vw,78px);
    line-height:.92;letter-spacing:-.04em;font-weight:950;
    text-transform:uppercase;
  }
  h1 .line1{display:block;color:#fff}
  h1 .line2{
    display:block;
    background:linear-gradient(90deg,#ff2e63,#ff7a18,#ffd166,#ff2e63);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    background-size:220% 100%;
    animation:gradSlide 5s linear infinite;
  }
  @keyframes gradSlide{to{background-position:220% 0}}
  .sub{
    margin:16px auto 0;max-width:560px;color:rgba(255,255,255,.78);
    font-size:clamp(14px,2vw,17px);line-height:1.55;font-weight:550;
  }
  .sub code{color:#ffd166;background:rgba(255,255,255,.09);padding:2px 7px;border-radius:6px;font-weight:800}

  /* ===== HIDDEN CHECKBOX ===== */
  .like-toggle{
    position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;
  }

  /* ===== THE BUTTON ===== */
  .btn-zone{position:relative;z-index:4;margin:34px 0 8px;display:flex;flex-direction:column;align-items:center}
  .btn{
    position:relative;
    display:inline-flex;align-items:center;gap:16px;
    padding:20px 30px 20px 26px;
    border-radius:999px;
    background:#ffffff;
    color:#17102e;
    cursor:pointer;
    user-select:none;-webkit-user-select:none;
    box-shadow:0 18px 50px rgba(0,0,0,.45), 0 4px 0 rgba(0,0,0,.18), inset 0 -3px 0 rgba(0,0,0,.06);
    transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .35s, color .3s, box-shadow .35s;
    animation:btnPulse 2.6s ease-in-out infinite;
  }
  @keyframes btnPulse{0%,100%{box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 0 rgba(255,46,99,.55)}50%{box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 16px rgba(255,46,99,0)}}
  .btn:hover{transform:translateY(-3px) rotate(-1.5deg) scale(1.04)}
  .btn:active{transform:scale(.92) rotate(1deg)}
  .like-toggle:focus-visible + .stage .btn{outline:4px solid #ffd166;outline-offset:6px}

  /* heart icon — pure CSS heart */
  .heart-wrap{position:relative;width:38px;height:34px;display:grid;place-items:center;flex:0 0 auto}
  .heart{
    position:relative;width:26px;height:24px;
    background:#ff2e63;
    transform:rotate(45deg) translateY(3px);
    border-radius:5px;
    transition:background .3s, transform .3s;
    animation:beat 1.4s ease-in-out infinite;
    transform-origin:center;
  }
  .heart::before,.heart::after{
    content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:inherit;
  }
  .heart::before{left:-13px;top:0}
  .heart::after{left:0;top:-13px}
  @keyframes beat{0%,100%{transform:rotate(45deg) translateY(3px) scale(1)}18%{transform:rotate(45deg) translateY(3px) scale(1.14)}32%{transform:rotate(45deg) translateY(3px) scale(1.28)}46%{transform:rotate(45deg) translateY(3px) scale(1.1)}}

  .txt{position:relative;height:30px;min-width:92px;display:flex;align-items:center}
  .txt span{position:absolute;left:0;top:50%;transform:translateY(-50%);font-weight:950;letter-spacing:.06em;font-size:22px;white-space:nowrap;transition:opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1)}
  .liked-txt{opacity:0;transform:translateY(-50%) scale(.4) rotate(-12deg) !important;color:#fff}
  .divider{width:1px;height:28px;background:rgba(0,0,0,.14);flex:0 0 auto}
  .count{position:relative;height:22px;min-width:58px;font-weight:850;font-size:15px;color:rgba(23,16,46,.55)}
  .count span{position:absolute;left:0;top:50%;transform:translateY(-50%);transition:opacity .25s, transform .3s}
  .count .n1{opacity:0;transform:translateY(-50%) scale(.4)}
  .badge-zero{
    position:absolute;top:-10px;right:-8px;
    background:#17102e;color:#ffd166;font-size:10px;font-weight:900;letter-spacing:.12em;
    padding:5px 8px;border-radius:999px;border:2px solid #fff;
    transform:rotate(8deg);
  }

  /* rings */
  .ring{position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;border:4px solid #ff2e63;opacity:0;pointer-events:none}
  .ring.r2{border-color:#ffb703;border-width:3px}

  /* particles burst */
  .burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:5}
  .burst span{position:absolute;left:0;top:0;opacity:0;width:10px;height:10px;margin:-5px 0 0 -5px}
  .burst span:nth-child(1){--x:118px;--y:-92px;background:#ff2e63;border-radius:50%;width:14px;height:14px}
  .burst span:nth-child(2){--x:-118px;--y:-86px;background:#ffd166;border-radius:2px;width:11px;height:11px}
  .burst span:nth-child(3){--x:140px;--y:-10px;background:#7c3aed;border-radius:50%;width:10px;height:10px}
  .burst span:nth-child(4){--x:-140px;--y:-6px;background:#00d4ff;border-radius:2px;width:12px;height:12px}
  .burst span:nth-child(5){--x:96px;--y:84px;background:#ff7a18;border-radius:50%;width:12px;height:12px}
  .burst span:nth-child(6){--x:-96px;--y:86px;background:#ff2e63;border-radius:2px;width:10px;height:10px}
  .burst span:nth-child(7){--x:0px;--y:-138px;background:#ffd166;border-radius:50%;width:13px;height:13px}
  .burst span:nth-child(8){--x:62px;--y:-122px;background:#fff;border-radius:2px;width:9px;height:9px}
  .burst span:nth-child(9){--x:-62px;--y:-122px;background:#00f5a0;border-radius:50%;width:10px;height:10px}
  .burst span:nth-child(10){--x:150px;--y:62px;background:#ffd166;border-radius:2px;width:11px;height:11px}
  .burst span:nth-child(11){--x:-150px;--y:64px;background:#ff7a18;border-radius:50%;width:12px;height:12px}
  .burst span:nth-child(12){--x:0px;--y:132px;background:#ff2e63;border-radius:2px;width:10px;height:10px}
  .burst span:nth-child(13){--x:84px;--y:128px;background:#7c3aed;border-radius:50%;width:9px;height:9px}
  .burst span:nth-child(14){--x:-84px;--y:128px;background:#ffd166;border-radius:2px;width:13px;height:13px}
  .burst span:nth-child(15){--x:172px;--y:-58px;background:#00d4ff;border-radius:50%;width:8px;height:8px}
  .burst span:nth-child(16){--x:-172px;--y:-58px;background:#fff;border-radius:2px;width:8px;height:8px}

  /* floating mini hearts */
  .floats{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:6}
  .floats i{position:absolute;font-style:normal;opacity:0;font-size:22px;color:#ff2e63;text-shadow:0 4px 14px rgba(255,46,99,.6)}
  .floats i:nth-child(1){left:-46px;top:-20px;--dx:-30px}
  .floats i:nth-child(2){left:20px;top:-34px;font-size:28px;color:#ffd166;--dx:38px}
  .floats i:nth-child(3){left:-14px;top:-16px;font-size:16px;color:#ff7a18;--dx:6px}
  .floats i:nth-child(4){left:34px;top:2px;font-size:18px;color:#fff;--dx:52px}
  .floats i:nth-child(5){left:-58px;top:8px;font-size:18px;color:#ff2e63;--dx:-54px}

  /* hint */
  .hint{margin-top:16px;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85);font-weight:800;font-size:14px;letter-spacing:.02em}
  .hint .arrow{display:inline-block;animation:bounce 1s ease-in-out infinite;font-size:20px}
  @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
  .hint kbd{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-bottom-width:3px;padding:2px 7px;border-radius:6px;font-size:12px}

  /* toast */
  .toast{
    position:relative;z-index:4;margin-top:18px;
    background:linear-gradient(90deg,#ff2e63,#ff7a18);
    color:#fff;font-weight:950;letter-spacing:.04em;font-size:14px;
    padding:10px 18px;border-radius:999px;
    opacity:0;transform:translateY(14px) scale(.8) rotate(-3deg);
    transition:opacity .3s, transform .45s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 12px 30px rgba(255,46,99,.45);
    pointer-events:none;
  }

  /* code strip */
  .code-strip{
    position:relative;z-index:3;margin-top:30px;
    display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:760px;
  }
  .code-strip div{
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
    border-radius:14px;padding:10px 14px;font-size:12.5px;color:rgba(255,255,255,.78);
    backdrop-filter:blur(8px);
  }
  .code-strip code{color:#a5f3fc;font-weight:800}
  footer{position:relative;z-index:3;margin-top:18px;color:rgba(255,255,255,.45);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;text-align:center}

  /* ===== CHECKED = CRAZY MODE ===== */
  #like:checked ~ .stage .rays{opacity:.85;width:900px;height:900px;animation-duration:7s}
  #like:checked ~ .stage .btn{
    background:linear-gradient(120deg,#ff2e63,#ff3d00 55%,#ff7a18);
    color:#fff;
    animation:pop .65s cubic-bezier(.34,1.8,.64,1), btnPulseLiked 1.2s ease-in-out .65s infinite;
    box-shadow:0 22px 60px rgba(255,46,99,.55), 0 0 0 6px rgba(255,255,255,.14), inset 0 -4px 0 rgba(0,0,0,.18);
  }
  @keyframes pop{0%{transform:scale(1)}28%{transform:scale(1.22) rotate(-4deg)}52%{transform:scale(.9) rotate(3deg)}74%{transform:scale(1.1) rotate(-2deg)}100%{transform:scale(1.06)}}
  @keyframes btnPulseLiked{0%,100%{transform:scale(1.06) rotate(-1deg)}50%{transform:scale(1.09) rotate(1deg)}}
  #like:checked ~ .stage .heart{background:#fff;animation:beatLiked .9s ease-in-out infinite}
  @keyframes beatLiked{0%,100%{transform:rotate(45deg) translateY(3px) scale(1.35)}25%{transform:rotate(45deg) translateY(3px) scale(1.65)}45%{transform:rotate(45deg) translateY(3px) scale(1.5)}}
  #like:checked ~ .stage .like-txt{opacity:0;transform:translateY(-50%) scale(.4) rotate(10deg) !important}
  #like:checked ~ .stage .liked-txt{opacity:1;transform:translateY(-50%) scale(1) rotate(-2deg) !important}
  #like:checked ~ .stage .divider{background:rgba(255,255,255,.4)}
  #like:checked ~ .stage .count{color:rgba(255,255,255,.9)}
  #like:checked ~ .stage .count .n0{opacity:0;transform:translateY(-50%) scale(.4)}
  #like:checked ~ .stage .count .n1{opacity:1;transform:translateY(-50%) scale(1)}
  #like:checked ~ .stage .badge-zero{background:#fff;color:#ff2e63;transform:rotate(-6deg) scale(1.1)}

  #like:checked ~ .stage .burst span{
    animation:burst .85s cubic-bezier(.17,.89,.32,1.28) forwards;
  }
  /* stagger a bit */
  #like:checked ~ .stage .burst span:nth-child(even){animation-delay:.06s}
  #like:checked ~ .stage .burst span:nth-child(3n){animation-delay:.12s}
  @keyframes burst{
    0%{opacity:1;transform:translate(0,0) scale(.3) rotate(0deg)}
    55%{opacity:1;transform:translate(var(--x),var(--y)) scale(1.25) rotate(340deg)}
    100%{opacity:0;transform:translate(calc(var(--x)*1.25),calc(var(--y)*1.25 + 26px)) scale(.6) rotate(720deg)}
  }

  #like:checked ~ .stage .ring.r1{animation:ringGo .9s ease-out forwards}
  #like:checked ~ .stage .ring.r2{animation:ringGo .9s .14s ease-out forwards}
  @keyframes ringGo{0%{opacity:.95;transform:scale(.4)}100%{opacity:0;transform:scale(3.4)}}

  #like:checked ~ .stage .floats i{animation:floatUp 1.5s ease-out forwards}
  #like:checked ~ .stage .floats i:nth-child(2){animation-delay:.12s}
  #like:checked ~ .stage .floats i:nth-child(3){animation-delay:.22s}
  #like:checked ~ .stage .floats i:nth-child(4){animation-delay:.08s}
  #like:checked ~ .stage .floats i:nth-child(5){animation-delay:.18s}
  @keyframes floatUp{
    0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0deg)}
    18%{opacity:1;transform:translate(calc(var(--dx)*.4),-42px) scale(1.25) rotate(-14deg)}
    100%{opacity:0;transform:translate(var(--dx),-150px) scale(1) rotate(22deg)}
  }

  #like:checked ~ .stage .toast{opacity:1;transform:translateY(0) scale(1) rotate(-1deg)}
  #like:checked ~ .stage .hint .arrow{animation:none;transform:rotate(180deg)}

  @media (max-width:560px){
    .btn{padding:16px 20px 16px 20px;gap:12px}
    .txt{min-width:78px}
    .txt span{font-size:19px}
    .rays{width:520px;height:520px}
    #like:checked ~ .stage .rays{width:620px;height:620px}
    .code-strip div{font-size:11.5px}
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
  }
</style>
</head>
<body>

<input type="checkbox" id="like" class="like-toggle" aria-label="Like this">

<main class="stage" id="stage">
  <div class="ambient"><i>♥</i><i>♥</i><i>♥</i><i>♥</i><i>♥</i><i>♥</i></div>
  <div class="rays"></div>

  <header>
    <div class="eyebrow"><span>HTML</span><span>CSS only</span><span><b>0</b> JavaScript</span><span>Checkbox hack</span></div>
    <h1><span class="line1">Pure CSS</span><span class="line2">Like Button</span></h1>
    <p class="sub">One sneaky <code>&lt;input type="checkbox"&gt;</code> + one <code>&lt;label&gt;</code> = a button that explodes with hearts, rings &amp; confetti. Click it. Go on.</p>
  </header>

  <div class="btn-zone">
    <label class="btn" for="like" role="button" aria-pressed="false">
      <span class="badge-zero">0 JS</span>
      <span class="ring r1"></span>
      <span class="ring r2"></span>

      <span class="heart-wrap"><span class="heart"></span></span>

      <span class="txt">
        <span class="like-txt">LIKE</span>
        <span class="liked-txt">LIKED!</span>
      </span>

      <span class="divider"></span>

      <span class="count"><span class="n0">1,024</span><span class="n1">1,025 ♥</span></span>

      <span class="burst">
        <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>
      </span>
      <span class="floats"><i>♥</i><i>♥</i><i>♥</i><i>♥</i><i>♥</i></span>
    </label>

    <div class="hint"><span class="arrow">👆</span> Click the button to go crazy <span style="opacity:.6">·</span> <span><kbd>Tab</kbd> + <kbd>Space</kbd> works too</span></div>
    <div class="toast">🎉 YOU LIKED THIS! &nbsp;♥♥♥&nbsp; 🎉 &nbsp;click again to unlike</div>
  </div>

  <div class="code-strip">
    <div><code>:checked</code> triggers the chaos</div>
    <div><code>@keyframes</code> does all the movement</div>
    <div>No <code>&lt;script&gt;</code> was harmed</div>
  </div>

  <footer>Crazy animation · 100% CSS · Pure &amp; simple</footer>
</main>

</body>
</html>

Reasoning trace (2,336 tokens)

Designing a pure CSS like button with checkbox hack and multiple CSS animations while ensuring responsive layout and first-paint visibility.Extending the CSS animation sequence with particle bursts and pseudo-element text toggling.Adding particle burst, ring expansion, and text toggle animations triggered by the checkbox state.