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: 10.9 s
Cost: $0.0034
Output tokens: 6,682
Spent thinking: 1,214 tokens
Speed: 750.5 tok/s
Console errors: 0

First token after: 2.0 s
First visible text after: 4.3 s
Prompt tokens: 374
Code size: 14.6 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
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 · 198 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LIKE — Pure CSS Crazy Button</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:linear-gradient(135deg,#12002b 0%,#3a0a5e 38%,#8b0f4d 72%,#ff2d78 100%);
    color:#fff;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:28px 18px 34px;position:relative;
  }
  body:has(#likeMain:checked){animation:hue 1.2s ease-in-out infinite alternate}
  @keyframes hue{from{filter:hue-rotate(0deg) saturate(1.2)}to{filter:hue-rotate(38deg) saturate(1.7)}}

  /* floating background hearts */
  .bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
  .bg span{position:absolute;color:#ff6b9d;opacity:.16;animation:floatUp linear infinite;line-height:1}
  .bg span:nth-child(1){left:6%;top:110%;font-size:42px;animation-duration:11s}
  .bg span:nth-child(2){left:16%;top:110%;font-size:22px;animation-duration:8s;animation-delay:-3s}
  .bg span:nth-child(3){left:28%;top:110%;font-size:60px;animation-duration:14s;animation-delay:-7s}
  .bg span:nth-child(4){left:48%;top:110%;font-size:28px;animation-duration:9s;animation-delay:-2s}
  .bg span:nth-child(5){left:66%;top:110%;font-size:52px;animation-duration:12s;animation-delay:-9s}
  .bg span:nth-child(6){left:82%;top:110%;font-size:24px;animation-duration:7s;animation-delay:-4s}
  .bg span:nth-child(7){left:92%;top:110%;font-size:44px;animation-duration:13s;animation-delay:-6s}
  .bg span:nth-child(8){left:38%;top:110%;font-size:18px;animation-duration:6s;animation-delay:-1s}
  @keyframes floatUp{to{transform:translateY(-130vh) rotate(340deg)}}

  .badge{z-index:2;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);padding:8px 14px;border-radius:999px;font-size:12px;letter-spacing:.14em;font-weight:800;text-transform:uppercase}
  .badge b{width:9px;height:9px;background:#2dff8f;border-radius:50%;box-shadow:0 0 0 4px rgba(45,255,143,.2);display:inline-block}
  h1{z-index:2;text-align:center;font-size:clamp(38px,7vw,72px);line-height:.95;font-weight:1000;letter-spacing:-.04em;margin:18px 0 10px;text-shadow:0 10px 40px rgba(0,0,0,.35)}
  h1 em{font-style:normal;background:linear-gradient(90deg,#ffd166,#ff2d78,#ff8fab,#ffd166);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sub{z-index:2;text-align:center;opacity:.92;font-size:clamp(15px,2.4vw,18px);max-width:560px;line-height:1.5}
  .sub strong{background:#fff;color:#c9184a;padding:2px 8px;border-radius:999px}

  .card{
    z-index:2;margin-top:26px;width:min(620px,94vw);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
    backdrop-filter:blur(18px);border-radius:32px;padding:28px 18px 22px;display:flex;flex-direction:column;align-items:center;
    box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35);position:relative;
  }
  body:has(#likeMain:checked) .card{animation:cardShake .6s cubic-bezier(.36,.07,.19,.97) both}
  @keyframes cardShake{0%,100%{transform:translate(0) rotate(0)}20%{transform:translate(-8px,4px) rotate(-1deg)}40%{transform:translate(8px,-4px) rotate(1deg)}60%{transform:translate(-6px,-2px) rotate(-.5deg)}80%{transform:translate(6px,2px) rotate(.5deg)}}

  .stage{position:relative;width:280px;height:280px;display:grid;place-items:center;margin:6px auto 0}
  /* starburst behind */
  .starburst{position:absolute;width:240px;height:240px;border-radius:50%;opacity:.22;
    background:repeating-conic-gradient(from 0deg,#ffd166 0deg 12deg,transparent 12deg 24deg);
    -webkit-mask:radial-gradient(circle,transparent 34%,#000 35%,#000 72%,transparent 73%);mask:radial-gradient(circle,transparent 34%,#000 35%,#000 72%,transparent 73%);
    animation:spin 14s linear infinite;transition:opacity .3s,transform .3s}
  #likeMain:checked ~ .starburst{opacity:.95;animation:spin .7s linear infinite;transform:scale(1.28)}
  @keyframes spin{to{transform:rotate(360deg)}}

  .ring,.ring2{position:absolute;width:150px;height:150px;border:5px solid #ff2d78;border-radius:50%;opacity:0;pointer-events:none}
  #likeMain:checked ~ .ring{animation:ringOut .85s cubic-bezier(.2,.8,.3,1) forwards}
  #likeMain:checked ~ .ring2{animation:ringOut .85s .12s cubic-bezier(.2,.8,.3,1) forwards;border-color:#ffd166}
  @keyframes ringOut{0%{transform:scale(.45);opacity:1;border-width:10px}100%{transform:scale(2.5);opacity:0;border-width:1px}}

  /* THE BUTTON */
  .like-btn{
    position:relative;z-index:3;width:168px;height:168px;border-radius:50%;cursor:pointer;user-select:none;-webkit-user-select:none;
    background:radial-gradient(circle at 32% 28%,#ffffff 0%,#ffe5ec 38%,#ffb3c6 72%,#ff8fab 100%);
    border:5px solid rgba(255,255,255,.9);
    box-shadow:0 22px 50px rgba(255,45,120,.55),0 8px 0 #c9184a,0 18px 30px rgba(0,0,0,.35),inset 0 -10px 20px rgba(201,24,74,.18);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    transition:transform .18s,box-shadow .18s,background .3s;
    animation: idleBeat 2.2s ease-in-out infinite;
  }
  @keyframes idleBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.045)}24%{transform:scale(1)}}
  .like-btn:hover{transform:scale(1.07) rotate(-2deg)}
  .like-btn:active{transform:scale(.92) translateY(6px);box-shadow:0 6px 20px rgba(255,45,120,.5),0 2px 0 #c9184a}
  #likeMain:checked ~ .like-btn{
    background:radial-gradient(circle at 32% 28%,#fff 0%,#ff8fab 30%,#ff2d78 68%,#c9184a 100%);
    animation:pop .65s cubic-bezier(.68,-.55,.27,1.55) both, happyBeat 1.05s .65s ease-in-out infinite;
    box-shadow:0 26px 70px rgba(255,45,120,.85),0 8px 0 #7a0c2e,0 0 0 10px rgba(255,209,102,.35),0 0 60px #ff2d78;
  }
  @keyframes pop{0%{transform:scale(.6) rotate(-18deg)}55%{transform:scale(1.32) rotate(10deg)}75%{transform:scale(.92) rotate(-6deg)}100%{transform:scale(1.08) rotate(0)}}
  @keyframes happyBeat{0%,100%{transform:scale(1.08) rotate(0)}18%{transform:scale(1.22) rotate(-4deg)}36%{transform:scale(1.05) rotate(3deg)}54%{transform:scale(1.18) rotate(-2deg)}}

  .heart{width:74px;height:74px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.22));transition:transform .3s}
  .heart path{fill:#ff2d78;transition:fill .3s}
  #likeMain:checked ~ .like-btn .heart path{fill:#fff}
  #likeMain:checked ~ .like-btn .heart{animation:heartSpin .8s cubic-bezier(.68,-.4,.27,1.4) both}
  @keyframes heartSpin{from{transform:rotate(0) scale(1)}to{transform:rotate(360deg) scale(1.15)}}

  .txt{position:relative;width:110px;height:22px;text-align:center;font-weight:1000;letter-spacing:.16em;font-size:16px;color:#c9184a}
  .txt span{position:absolute;inset:0;transition:.25s}
  .txt .on{opacity:0;transform:translateY(14px) scale(.6) rotate(-8deg);color:#fff}
  #likeMain:checked ~ .like-btn .txt .off{opacity:0;transform:translateY(-14px) scale(.6)}
  #likeMain:checked ~ .like-btn .txt .on{opacity:1;transform:translateY(0) scale(1) rotate(0)}
  .cnt{font-size:12px;font-weight:800;opacity:.75;color:#7a0c2e;letter-spacing:.05em}
  #likeMain:checked ~ .like-btn .cnt{color:#ffe5ec}

  /* particles */
  .parts{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:4}
  .parts i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;opacity:0}
  .parts i:nth-child(1){--a:0deg;--d:110px;background:#ffd166;border-radius:2px}
  .parts i:nth-child(2){--a:30deg;--d:130px;background:#ff2d78}
  .parts i:nth-child(3){--a:60deg;--d:95px;background:#06d6a0;width:10px;height:10px;border-radius:2px}
  .parts i:nth-child(4){--a:90deg;--d:140px;background:#118ab2}
  .parts i:nth-child(5){--a:120deg;--d:105px;background:#ffd166;width:18px;height:8px;border-radius:99px}
  .parts i:nth-child(6){--a:150deg;--d:125px;background:#ff8fab}
  .parts i:nth-child(7){--a:180deg;--d:100px;background:#c77dff;border-radius:2px}
  .parts i:nth-child(8){--a:210deg;--d:135px;background:#ff2d78;width:10px;height:10px}
  .parts i:nth-child(9){--a:240deg;--d:115px;background:#ffd166}
  .parts i:nth-child(10){--a:270deg;--d:145px;background:#06d6a0;width:16px;height:8px;border-radius:99px}
  .parts i:nth-child(11){--a:300deg;--d:98px;background:#ff8fab;border-radius:2px}
  .parts i:nth-child(12){--a:330deg;--d:128px;background:#c77dff}
  .parts i:nth-child(13){--a:15deg;--d:150px;background:#ff2d78;width:8px;height:8px}
  .parts i:nth-child(14){--a:195deg;--d:150px;background:#ffd166;width:8px;height:8px}
  #likeMain:checked ~ .parts i{animation:burst .9s cubic-bezier(.1,.9,.3,1) forwards}
  #likeMain:checked ~ .parts i:nth-child(even){animation-duration:1.1s;animation-delay:.08s}
  @keyframes burst{0%{transform:rotate(var(--a)) translate(0) scale(1);opacity:1}70%{opacity:1}100%{transform:rotate(var(--a)) translate(var(--d)) scale(0) rotate(540deg);opacity:0}}

  /* floating words */
  .word{position:absolute;font-weight:1000;font-size:28px;letter-spacing:.08em;opacity:0;pointer-events:none;text-shadow:0 4px 0 rgba(0,0,0,.15);z-index:5}
  .w1{left:2%;top:18%;color:#ffd166;transform:rotate(-14deg)}
  .w2{right:2%;top:22%;color:#fff;transform:rotate(12deg)}
  .w3{left:8%;bottom:14%;color:#ff8fab;transform:rotate(10deg);font-size:20px}
  .w4{right:8%;bottom:16%;color:#06d6a0;transform:rotate(-10deg);font-size:20px}
  #likeMain:checked ~ .w1{animation:wordUp .9s .05s cubic-bezier(.68,-.5,.27,1.5) both}
  #likeMain:checked ~ .w2{animation:wordUp .9s .15s cubic-bezier(.68,-.5,.27,1.5) both}
  #likeMain:checked ~ .w3{animation:wordUp .9s .25s cubic-bezier(.68,-.5,.27,1.5) both}
  #likeMain:checked ~ .w4{animation:wordUp .9s .35s cubic-bezier(.68,-.5,.27,1.5) both}
  @keyframes wordUp{0%{opacity:0;transform:translateY(40px) scale(.3) rotate(0)}60%{opacity:1}100%{opacity:0;transform:translateY(-70px) scale(1.4) rotate(6deg)}}

  /* ghosts */
  .ghost{position:absolute;width:34px;height:34px;opacity:0;pointer-events:none;z-index:2}
  .ghost path{fill:#ff8fab}
  .g1{left:50%;top:50%;margin:-17px}
  .g2{left:50%;top:50%;margin:-17px}
  #likeMain:checked ~ .g1{animation:ghostFly 1s .1s ease-out both}
  #likeMain:checked ~ .g2{animation:ghostFly2 1.1s .2s ease-out both}
  @keyframes ghostFly{0%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:1}100%{transform:translate(-110px,-120px) scale(1.6) rotate(-30deg);opacity:0}}
  @keyframes ghostFly2{0%{transform:translate(0,0) scale(.5);opacity:0}20%{opacity:1}100%{transform:translate(115px,-105px) scale(1.4) rotate(35deg);opacity:0}}

  .hint{z-index:2;margin-top:14px;font-size:14px;opacity:.9}
  .hint kbd{background:#fff;color:#111;padding:3px 8px;border-radius:6px;font-weight:800;box-shadow:0 3px 0 #bbb;font-family:inherit}
  .hidden-check{position:absolute;opacity:0;width:1px;height:1px}

  /* mini likes */
  .minis{z-index:2;margin-top:22px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
  .mini{position:relative;width:74px;height:74px;border-radius:22px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;cursor:pointer;font-size:32px;transition:transform .2s,background .2s;box-shadow:0 10px 25px rgba(0,0,0,.25)}
  .mini:hover{transform:translateY(-4px) scale(1.06) rotate(-3deg)}
  .mini small{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.12em;font-weight:800;opacity:.8}
  .mini input{position:absolute;opacity:0;width:1px;height:1px}
  .mini input:checked + span{display:inline-block;animation:miniPop .6s cubic-bezier(.68,-.55,.27,1.6) both}
  .mini:has(input:checked){background:#ff2d78;border-color:#fff;box-shadow:0 0 0 4px rgba(255,209,102,.5),0 18px 40px rgba(255,45,120,.6)}
  @keyframes miniPop{0%{transform:scale(.4) rotate(-20deg)}60%{transform:scale(1.6) rotate(12deg)}100%{transform:scale(1.15) rotate(0)}}
  .mini .spark{position:absolute;inset:-8px;border-radius:26px;border:3px solid #ffd166;opacity:0;pointer-events:none}
  .mini:has(input:checked) .spark{animation:ringOut .7s ease-out both}

  .foot{z-index:2;margin-top:36px;font-size:13px;opacity:.75;text-align:center;letter-spacing:.06em}
  .foot code{background:rgba(0,0,0,.25);padding:3px 8px;border-radius:6px}
  @media(max-width:480px){ .stage{width:240px;height:240px} .like-btn{width:148px;height:148px} .heart{width:62px;height:62px} .card{border-radius:26px} }
</style>
</head>
<body>
<div class="bg"><span>♥</span><span>♥</span><span>♥</span><span>♥</span><span>♥</span><span>♥</span><span>♥</span><span>♥</span></div>

<div class="badge"><b></b> 100% Pure CSS &nbsp;•&nbsp; 0 JavaScript</div>
<h1>CLICK TO<br><em>GO CRAZY.</em></h1>
<p class="sub">One innocent <strong>LIKE</strong> button. No scripts, no libraries — just a checkbox and unreasonable amounts of CSS.</p>

<div class="card">
  <div class="stage">
    <input class="hidden-check" type="checkbox" id="likeMain" aria-label="Like button">
    <div class="starburst"></div>
    <div class="ring"></div>
    <div class="ring2 ring"></div>

    <svg class="ghost g1" viewBox="0 0 24 24"><path d="M12 21s-8-5.5-10-10C.5 7 3 3 7 3c2.5 0 4 1.5 5 3 1-1.5 2.5-3 5-3 4 0 6.5 4 5 8-2 4.5-10 10-10 10z"/></svg>
    <svg class="ghost g2" viewBox="0 0 24 24"><path d="M12 21s-8-5.5-10-10C.5 7 3 3 7 3c2.5 0 4 1.5 5 3 1-1.5 2.5-3 5-3 4 0 6.5 4 5 8-2 4.5-10 10-10 10z"/></svg>

    <label class="like-btn" for="likeMain">
      <svg class="heart" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21s-8-5.5-10-10C.5 7 3 3 7 3c2.5 0 4 1.5 5 3 1-1.5 2.5-3 5-3 4 0 6.5 4 5 8-2 4.5-10 10-10 10z"/></svg>
      <span class="txt"><span class="off">LIKE</span><span class="on">LIKED!</span></span>
      <span class="cnt">♥ 1,337</span>
    </label>

    <div class="parts"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
    <div class="word w1">LOVE!</div><div class="word w2">WOW!</div><div class="word w3">YES!</div><div class="word w4">BOOM!</div>
  </div>
  <p class="hint">👆 Click the heart &nbsp;•&nbsp; <kbd>Tab</kbd> + <kbd>Space</kbd> works too &nbsp;•&nbsp; Click again to un-like</p>

  <div class="minis">
    <label class="mini"><input type="checkbox"><span>★</span><i class="spark"></i><small>STAR</small></label>
    <label class="mini"><input type="checkbox"><span>♥</span><i class="spark"></i><small>LOVE</small></label>
    <label class="mini"><input type="checkbox"><span>▲</span><i class="spark"></i><small>UPVOTE</small></label>
    <label class="mini"><input type="checkbox"><span>✦</span><i class="spark"></i><small>SPARK</small></label>
  </div>
</div>

<p class="foot">View source: there is <code>&lt;input type="checkbox"&gt;</code> and <code>:checked</code> — that&rsquo;s the whole trick.</p>
</body>
</html>

Reasoning trace (1,214 tokens)

Implementing a pure CSS animated like button using a hidden checkbox and label with sibling selectors for click-triggered confetti and heart effects.Extending the CSS-only design with pseudo-element particles, animated text swap, and glassmorphism layout.