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: 16.0 s
Cost: $0.0048
Output tokens: 9,620
Spent thinking: 3,354 tokens
Speed: 683.4 tok/s
Console errors: 0

First token after: 2.0 s
First visible text after: 8.3 s
Prompt tokens: 374
Code size: 16.6 KB
Finish reason: stop
Served by: Meta
Model id: meta/muse-ember
Reasoning sent: {"effort":"high"}
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 · 277 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 Chaos</title>
<style>
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    min-height:100vh;
    overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(125deg,#ff2d55,#ff7eb3,#7c3aed,#06b6d4,#ff2d55);
    background-size:300% 300%;
    animation:bgShift 10s ease infinite;
    color:#111;
  }
  @keyframes bgShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

  /* Pure CSS checkbox hack — no JS */
  #likeToggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}

  .stage{width:100%;display:flex;align-items:center;justify-content:center;padding:18px;position:relative;z-index:2}

  /* Floating background hearts */
  .bg-heart{position:fixed;color:rgba(255,255,255,.22);pointer-events:none;user-select:none;line-height:1;animation:drift 7s ease-in-out infinite alternate;z-index:0}
  .bg-heart:nth-child(1){left:6%;top:12%;font-size:52px;animation-delay:0s}
  .bg-heart:nth-child(2){left:13%;top:70%;font-size:28px;animation-delay:.7s}
  .bg-heart:nth-child(3){right:8%;top:18%;font-size:42px;animation-delay:1.1s}
  .bg-heart:nth-child(4){right:16%;bottom:14%;font-size:26px;animation-delay:.4s}
  .bg-heart:nth-child(5){left:42%;top:6%;font-size:22px;animation-delay:1.6s}
  .bg-heart:nth-child(6){left:56%;bottom:8%;font-size:34px;animation-delay:.2s}
  @keyframes drift{from{transform:translateY(-14px) rotate(-10deg) scale(1)}to{transform:translateY(18px) rotate(12deg) scale(1.15)}}

  .card{
    width:min(540px,94vw);
    background:rgba(255,255,255,.94);
    border-radius:32px;
    padding:34px 28px 28px;
    text-align:center;
    box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 8px rgba(255,255,255,.25);
    position:relative;
    animation:cardFloat 4s ease-in-out infinite;
    backdrop-filter:blur(10px);
  }
  @keyframes cardFloat{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-8px) rotate(.3deg)}}

  .badge{
    display:inline-flex;align-items:center;gap:8px;
    background:#111;color:#fff;font-size:11px;letter-spacing:.16em;font-weight:800;
    padding:8px 14px;border-radius:999px;text-transform:uppercase;
  }
  .badge i{width:8px;height:8px;background:#ff2d55;border-radius:50%;display:inline-block;animation:blink 1s infinite}
  @keyframes blink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}

  h1{
    margin-top:18px;font-size:clamp(36px,6vw,56px);line-height:.95;font-weight:950;letter-spacing:-.04em;
    background:linear-gradient(90deg,#ff2d55,#ff7a18,#7c3aed,#ff2d55);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .sub{margin-top:10px;font-size:16px;line-height:1.45;color:#555;font-weight:600}
  .sub b{color:#ff2d55}

  /* BUTTON AREA */
  .clickable{display:block;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;margin-top:8px}
  .button-wrap{
    position:relative;width:210px;height:210px;margin:6px auto 0;display:flex;align-items:center;justify-content:center;
  }

  /* Starburst behind heart */
  .burst-star{
    position:absolute;left:50%;top:50%;width:250px;height:250px;z-index:0;opacity:0;
    background:#ffe600;
    clip-path:polygon(50% 0%,61% 18%,80% 7%,77% 28%,98% 25%,87% 42%,100% 52%,86% 61%,97% 78%,77% 76%,79% 97%,60% 85%,50% 100%,40% 85%,21% 97%,23% 76%,3% 78%,14% 61%,0% 52%,13% 42%,2% 25%,23% 28%,20% 7%,39% 18%);
    transform:translate(-50%,-50%) scale(0) rotate(-30deg);
    box-shadow:0 0 40px rgba(255,230,0,.6);
  }
  .burst-text{
    position:absolute;left:50%;top:50%;z-index:3;font-weight:950;font-size:28px;letter-spacing:.02em;
    color:#ff2d55;text-shadow:2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
    opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-14deg);pointer-events:none;white-space:nowrap;
  }

  /* Rings */
  .ring{position:absolute;left:50%;top:50%;width:120px;height:120px;border-radius:50%;border:4px solid #ff2d55;opacity:0;transform:translate(-50%,-50%) scale(.6);pointer-events:none;z-index:1}
  .ring.r2{border-color:#ff7a18;border-width:3px}
  .ring.r3{border-color:#7c3aed;border-width:5px;border-style:dashed}

  /* The LIKE button */
  .like-btn{
    position:relative;z-index:2;width:124px;height:124px;border-radius:50%;
    background:radial-gradient(circle at 30% 25%,#ff8fab,#ff2d55 55%,#c9184a);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 18px 36px rgba(255,45,85,.55),0 0 0 10px rgba(255,45,85,.18),inset 0 -8px 18px rgba(0,0,0,.18),inset 0 8px 14px rgba(255,255,255,.35);
    animation:idlePulse 1.6s ease-in-out infinite;
    transition:transform .15s ease;
  }
  .clickable:active .like-btn{transform:scale(.92)}
  @keyframes idlePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

  .heart-svg{width:62px;height:62px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));animation:heartBeat 1.6s ease-in-out infinite}
  @keyframes heartBeat{0%,100%{transform:scale(1) rotate(0deg)}14%{transform:scale(1.18) rotate(-4deg)}28%{transform:scale(1) rotate(3deg)}42%{transform:scale(1.14) rotate(-2deg)}}

  .sparkle{position:absolute;font-size:18px;color:#ffb703;pointer-events:none;animation:sparkleTwinkle 1.8s ease-in-out infinite;z-index:3}
  .sparkle.s1{left:12px;top:28px}.sparkle.s2{right:10px;top:52px;font-size:14px;animation-delay:.5s}.sparkle.s3{right:28px;bottom:18px;font-size:16px;animation-delay:.9s}.sparkle.s4{left:22px;bottom:30px;font-size:13px;animation-delay:1.2s}
  @keyframes sparkleTwinkle{0%,100%{transform:scale(.6) rotate(0deg);opacity:.4}50%{transform:scale(1.3) rotate(40deg);opacity:1}}

  /* Particles */
  .particles{position:absolute;left:50%;top:50%;z-index:4;pointer-events:none}
  .particles span{
    position:absolute;left:0;top:0;width:var(--s,14px);height:var(--s,14px);background:var(--c,#ff2d55);
    border-radius:var(--r,50%);opacity:0;transform:translate(-50%,-50%) scale(0);
  }
  .particles span:nth-child(odd){border-radius:3px}
  .particles span:nth-child(3n){border-radius:50% 50% 50% 50% / 60% 60% 40% 40%}

  /* Floating +1 hearts */
  .floaters{position:absolute;left:50%;top:50%;z-index:5;pointer-events:none}
  .floaters span{position:absolute;left:0;top:0;font-weight:950;opacity:0;transform:translate(-50%,-50%) scale(.5);color:var(--c,#ff2d55)}

  /* Pill label */
  .pill{
    margin:2px auto 0;display:inline-flex;align-items:center;gap:10px;
    background:#111;color:#fff;font-weight:900;letter-spacing:.12em;font-size:15px;
    padding:13px 24px;border-radius:999px;box-shadow:0 10px 24px rgba(0,0,0,.25);
    transition:all .25s ease;
  }
  .pill .dot{width:10px;height:10px;border-radius:50%;background:#fff;display:inline-block}
  .text-liked{display:none}
  .likes-count{margin-top:16px;font-weight:800;font-size:15px;color:#666;min-height:22px}
  .count-after{display:none;color:#ff2d55}
  .hint{margin-top:8px;font-size:13px;color:#999;font-weight:700}
  .hint .changed{display:none;color:#ff2d55}
  .arrow{display:inline-block;animation:bounceDown .9s ease-in-out infinite}
  @keyframes bounceDown{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

  .footer{margin-top:18px;padding-top:14px;border-top:2px dashed #eee;font-size:11px;letter-spacing:.14em;font-weight:800;color:#aaa;text-transform:uppercase}

  /* Confetti */
  .confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
  .confetti span{position:absolute;top:-24px;left:var(--l);width:10px;height:16px;background:var(--c);opacity:0;border-radius:2px;transform:rotate(0deg)}

  /* ===== WHEN CHECKED: CRAZY MODE ===== */
  #likeToggle:checked ~ .stage .card{animation:cardShake .65s cubic-bezier(.36,.07,.19,.97) both, cardFloat 4s ease-in-out .65s infinite}
  @keyframes cardShake{10%,90%{transform:translate(-2px,1px) rotate(-1deg)}20%,80%{transform:translate(4px,-2px) rotate(1deg)}30%,50%,70%{transform:translate(-8px,3px) rotate(-1.5deg)}40%,60%{transform:translate(8px,-3px) rotate(1.5deg)}}

  #likeToggle:checked ~ .stage .like-btn{animation:crazyBtn .9s cubic-bezier(.17,.89,.32,1.28) both;background:radial-gradient(circle at 30% 25%,#ffe600,#ff7a18 45%,#ff2d55 80%);box-shadow:0 22px 50px rgba(255,122,24,.7),0 0 0 14px rgba(255,230,0,.35),0 0 60px rgba(255,45,85,.8)}
  @keyframes crazyBtn{0%{transform:scale(1) rotate(0)}18%{transform:scale(1.35) rotate(-10deg)}36%{transform:scale(.82) rotate(10deg)}54%{transform:scale(1.28) rotate(-7deg)}72%{transform:scale(.94) rotate(5deg)}100%{transform:scale(1.12) rotate(0)}}

  #likeToggle:checked ~ .stage .heart-svg{animation:heartPop .9s cubic-bezier(.17,.89,.32,1.28) both}
  @keyframes heartPop{0%{transform:scale(1)}20%{transform:scale(0) rotate(-30deg)}45%{transform:scale(1.9) rotate(12deg)}65%{transform:scale(.8) rotate(-8deg)}85%{transform:scale(1.35) rotate(4deg)}100%{transform:scale(1.15) rotate(0)}}

  #likeToggle:checked ~ .stage .burst-star{animation:starPop .75s cubic-bezier(.17,.89,.32,1.28) both}
  @keyframes starPop{0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-40deg)}70%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(8deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(0deg)}}

  #likeToggle:checked ~ .stage .burst-text{animation:burstText .8s cubic-bezier(.17,.89,.32,1.28) .08s both}
  @keyframes burstText{0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(-20deg)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.4) rotate(4deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(-10deg)}}

  #likeToggle:checked ~ .stage .ring{animation:ringBurst .85s ease-out both}
  #likeToggle:checked ~ .stage .ring.r2{animation-delay:.12s}
  #likeToggle:checked ~ .stage .ring.r3{animation-delay:.22s}
  @keyframes ringBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}

  #likeToggle:checked ~ .stage .particles span{animation:particleBurst .95s cubic-bezier(.17,.89,.32,1.28) both;animation-delay:var(--d,0s)}
  @keyframes particleBurst{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0deg)}
    18%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(90deg)}
    70%{opacity:1;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.1) rotate(220deg)}
    100%{opacity:0;transform:translate(calc(-50% + var(--x)*1.35),calc(-50% + var(--y)*1.35 + 36px)) scale(.5) rotate(360deg)}
  }

  #likeToggle:checked ~ .stage .floaters span{animation:floatUp 1.5s ease-out both;animation-delay:var(--d,0s)}
  @keyframes floatUp{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(0deg)}
    20%{opacity:1;transform:translate(calc(-50% + var(--fx)*.3),-70px) scale(1.1) rotate(10deg)}
    100%{opacity:0;transform:translate(calc(-50% + var(--fx)),-190px) scale(1.5) rotate(24deg)}
  }

  #likeToggle:checked ~ .stage .pill{background:linear-gradient(90deg,#ff2d55,#ff7a18);transform:scale(1.08) rotate(-1deg);box-shadow:0 14px 30px rgba(255,45,85,.45)}
  #likeToggle:checked ~ .stage .text-unliked{display:none}
  #likeToggle:checked ~ .stage .text-liked{display:inline}
  #likeToggle:checked ~ .stage .count-before{display:none}
  #likeToggle:checked ~ .stage .count-after{display:inline}
  #likeToggle:checked ~ .stage .hint .orig{display:none}
  #likeToggle:checked ~ .stage .hint .changed{display:inline}
  #likeToggle:checked ~ .stage .arrow{display:none}

  #likeToggle:checked ~ .confetti span{animation:confettiRain 2.6s linear both;animation-delay:var(--d,0s)}
  @keyframes confettiRain{
    0%{opacity:1;transform:translateY(0) rotate(0deg)}
    100%{opacity:0;transform:translateY(110vh) rotate(720deg)}
  }

  #likeToggle:focus-visible ~ .stage .like-btn{outline:4px solid #111;outline-offset:6px}

  @media (max-width:480px){
    .card{padding:24px 18px 20px;border-radius:26px}
    .button-wrap{width:190px;height:190px}
    .like-btn{width:112px;height:112px}
    .burst-star{width:220px;height:220px}
  }
</style>
</head>
<body>

<input type="checkbox" id="likeToggle" aria-label="Like button">

<div class="confetti" aria-hidden="true">
  <span style="--l:4%;--c:#ff2d55;--d:0s"></span><span style="--l:10%;--c:#ffe600;--d:.15s"></span><span style="--l:16%;--c:#06b6d4;--d:.3s"></span><span style="--l:22%;--c:#a3e635;--d:.05s"></span><span style="--l:28%;--c:#ff7a18;--d:.4s"></span><span style="--l:34%;--c:#c084fc;--d:.2s"></span><span style="--l:40%;--c:#ff2d55;--d:.1s"></span><span style="--l:46%;--c:#ffe600;--d:.35s"></span><span style="--l:52%;--c:#06b6d4;--d:.25s"></span><span style="--l:58%;--c:#ff7a18;--d:0s"></span><span style="--l:64%;--c:#a3e635;--d:.3s"></span><span style="--l:70%;--c:#ff2d55;--d:.15s"></span><span style="--l:76%;--c:#ffe600;--d:.45s"></span><span style="--l:82%;--c:#c084fc;--d:.1s"></span><span style="--l:88%;--c:#06b6d4;--d:.2s"></span><span style="--l:93%;--c:#ff7a18;--d:.05s"></span><span style="--l:7%;--c:#c084fc;--d:.5s"></span><span style="--l:49%;--c:#a3e635;--d:.55s"></span><span style="--l:61%;--c:#ff2d55;--d:.6s"></span><span style="--l:85%;--c:#ffe600;--d:.65s"></span>
</div>

<span class="bg-heart">♥</span><span class="bg-heart">♥</span><span class="bg-heart">♥</span><span class="bg-heart">♥</span><span class="bg-heart">♥</span><span class="bg-heart">♥</span>

<main class="stage">
  <section class="card">
    <span class="badge"><i></i> Pure CSS &bull; No JavaScript</span>
    <h1>SMASH<br>THE LIKE</h1>
    <p class="sub">One innocent heart.<br><b>Absolutely unhinged</b> consequences.</p>

    <label class="clickable" for="likeToggle" aria-label="Toggle like">
      <div class="button-wrap">
        <div class="burst-star"></div>
        <div class="burst-text">YES!!! ♥</div>
        <div class="ring"></div><div class="ring r2"></div><div class="ring r3"></div>

        <div class="particles" aria-hidden="true">
          <span style="--x:95px;--y:-78px;--c:#ff2d55;--s:16px;--d:0s"></span>
          <span style="--x:-92px;--y:-72px;--c:#ffe600;--s:13px;--d:.05s"></span>
          <span style="--x:102px;--y:18px;--c:#06b6d4;--s:15px;--d:.1s"></span>
          <span style="--x:-100px;--y:22px;--c:#ff7a18;--s:14px;--d:.02s"></span>
          <span style="--x:72px;--y:88px;--c:#a3e635;--s:13px;--d:.12s"></span>
          <span style="--x:-70px;--y:90px;--c:#c084fc;--s:16px;--d:.07s"></span>
          <span style="--x:0px;--y:-108px;--c:#ff2d55;--s:15px;--d:.08s"></span>
          <span style="--x:8px;--y:108px;--c:#ffe600;--s:12px;--d:.04s"></span>
          <span style="--x:65px;--y:-95px;--c:#06b6d4;--s:11px;--d:.14s"></span>
          <span style="--x:-65px;--y:-96px;--c:#ff7a18;--s:11px;--d:.09s"></span>
          <span style="--x:108px;--y:-28px;--c:#a3e635;--s:12px;--d:.16s"></span>
          <span style="--x:-108px;--y:-26px;--c:#ff2d55;--s:12px;--d:.11s"></span>
          <span style="--x:88px;--y:62px;--c:#c084fc;--s:10px;--d:.18s"></span>
          <span style="--x:-88px;--y:64px;--c:#ffe600;--s:10px;--d:.13s"></span>
          <span style="--x:42px;--y:-112px;--c:#ff7a18;--s:10px;--d:.06s"></span>
          <span style="--x:-42px;--y:112px;--c:#06b6d4;--s:10px;--d:.17s"></span>
        </div>

        <div class="floaters" aria-hidden="true">
          <span style="--fx:-46px;--c:#ff2d55;--d:.05s;font-size:26px">♥</span>
          <span style="--fx:38px;--c:#ff7a18;--d:.18s;font-size:20px">♥</span>
          <span style="--fx:-12px;--c:#c084fc;--d:.3s;font-size:24px">+1</span>
          <span style="--fx:56px;--c:#06b6d4;--d:.42s;font-size:18px">♥</span>
          <span style="--fx:-58px;--c:#ffe600;--d:.5s;font-size:16px">♥</span>
        </div>

        <div class="like-btn">
          <svg class="heart-svg" viewBox="0 0 24 24" fill="white" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
        </div>

        <span class="sparkle s1">✦</span><span class="sparkle s2">✦</span><span class="sparkle s3">✦</span><span class="sparkle s4">✦</span>
      </div>

      <span class="pill"><span class="dot"></span><span class="text-unliked">LIKE</span><span class="text-liked">LIKED! ♥</span></span>
    </label>

    <div class="likes-count">
      <span class="count-before">♥ 1,337 likes &nbsp;•&nbsp; be the 1,338th</span>
      <span class="count-after">♥ 1,338 likes — you did it!</span>
    </div>

    <div class="hint"><span class="arrow">👇</span> <span class="orig">Click the heart — trust us</span><span class="changed">Click again to undo the madness</span></div>

    <div class="footer">100% CSS &nbsp;•&nbsp; 0% JavaScript &nbsp;•&nbsp; 1000% Drama</div>
  </section>
</main>

</body>
</html>

Reasoning trace (3,354 tokens)

Implementing a pure-CSS like button with checkbox hack and confetti animation while meeting no-JS and responsive layout constraints.Extending the pure-CSS like button with SVG heart, particle burst, and toggleable text via checkbox state.Adding sibling input selector, accessibility focus styles, and extra particle and text animations.Extending styles with CSS variables, particle shapes, rings, floaters, and confetti animations.