Exploding like buttonOne-line
Muse Ember
by MetaReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 31.3 s
- Cost
- $0.0084
- Output tokens
- 16,626
- Spent thinking
- 9,144 tokens
- Speed
- 583.4 tok/s
- Console errors
- 0
- First token after
- 2.8 s
- First visible text after
- 23.0 s
- Prompt tokens
- 374
- Code size
- 20.3 KB
- Finish reason
- stop
- Served by
- Meta
- Model id
meta/muse-ember- Reasoning sent
{"effort":"max"}- 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 · 431 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light">
<title>The Like Button But Make It CRAZY — Pure CSS</title>
<style>
:root{
--pink:#FF2E63;
--pink2:#FF4D6D;
--orange:#FF8A00;
--ink:#151527;
--muted:#6B6E84;
--card:rgba(255,255,255,.84);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
background:#FFF0F3;
color:var(--ink);
overflow-x:hidden;
}
::selection{background:var(--pink);color:#fff}
/* The secret checkbox — the entire "JavaScript" */
.hidden-toggle{
position:absolute;top:8px;left:8px;width:28px;height:28px;
opacity:0;pointer-events:none;
}
input:focus-visible ~ .page .like-btn{
outline:3px solid var(--ink);outline-offset:8px;border-radius:50%;
}
.page{
min-height:100vh;position:relative;overflow:hidden;
display:flex;flex-direction:column;align-items:center;
padding:26px 18px 36px;
background:
radial-gradient(circle at 15% 20%, rgba(255,214,10,.28), transparent 34%),
radial-gradient(circle at 85% 15%, rgba(123,97,255,.20), transparent 36%),
radial-gradient(rgba(21,21,39,.055) 1px, transparent 1px),
linear-gradient(150deg,#FFF5F7 0%,#FFE5EC 48%,#FFF8E1 100%);
background-size:auto,auto,22px 22px,auto;
transition:background .5s ease;
}
.page-glow{
position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;
background:radial-gradient(circle at 50% 46%, rgba(255,46,99,.28), transparent 52%);
}
.blob{position:absolute;border-radius:50%;filter:blur(58px);pointer-events:none;z-index:0}
.b1{width:340px;height:340px;background:#FFB3C1;top:-90px;left:-80px;opacity:.55}
.b2{width:300px;height:300px;background:#FFD60A;top:8%;right:-110px;opacity:.38}
.b3{width:360px;height:360px;background:#B8B8FF;bottom:-140px;left:32%;opacity:.42}
.bh{position:absolute;color:#FF8FA3;font-size:22px;opacity:.22;pointer-events:none;z-index:0;animation:floatY 6s ease-in-out infinite alternate}
.bh1{top:16%;left:7%}.bh2{top:28%;right:8%;animation-delay:-2s;font-size:30px}
.bh3{top:58%;left:5%;animation-delay:-4s;font-size:18px}.bh4{top:66%;right:6%;animation-delay:-1s}
.bh5{top:42%;left:12%;animation-delay:-3s;font-size:16px}.bh6{top:38%;right:15%;animation-delay:-5s;font-size:20px}
.topbar,.hero-text,.card,.features,.footnote{position:relative;z-index:2}
.topbar{width:min(980px,100%);display:flex;justify-content:space-between;align-items:center;gap:12px}
.badge{
display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
font-size:11px;font-weight:800;letter-spacing:.14em;padding:9px 15px;border-radius:999px;
}
.badge .dot{width:8px;height:8px;border-radius:50%;background:#06D6A0;animation:dotPulse 1.6s ease-in-out infinite}
.pill-right{
font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--ink);
border:1.5px solid rgba(21,21,39,.18);background:rgba(255,255,255,.65);
padding:9px 14px;border-radius:999px;
}
.hero-text{text-align:center;margin:34px 0 24px;max-width:820px}
.hero-text h1{
font-size:clamp(38px,7vw,72px);line-height:.92;letter-spacing:-.04em;font-weight:900;
}
.like-word{color:var(--pink)}
.crazy{
display:inline-block;
background:linear-gradient(92deg,var(--pink),var(--orange),#7B61FF,var(--pink));
background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
animation:gradMove 4s ease-in-out infinite;
}
.hero-text p{margin-top:16px;font-size:clamp(15px,2vw,18px);line-height:1.55;color:var(--muted);font-weight:500}
.hero-text p strong{color:var(--ink)}
/* ---------- CARD ---------- */
.card{
width:min(520px,94vw);text-align:center;position:relative;
background:var(--card);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border:1.5px solid rgba(255,255,255,.95);border-radius:34px;
padding:28px 22px 24px;
box-shadow:0 28px 70px rgba(255,46,99,.20),0 6px 20px rgba(21,21,39,.07);
}
.bubble{
position:relative;height:38px;display:flex;justify-content:center;align-items:center;
}
.bubble span{
position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;
font-size:13px;font-weight:800;letter-spacing:.02em;
background:var(--ink);color:#fff;padding:8px 14px;border-radius:999px;
animation:bob 1.6s ease-in-out infinite;transition:opacity .25s ease,transform .25s ease;
}
.bubble span::after{
content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;
background:var(--ink);transform:translateX(-50%) rotate(45deg);border-radius:2px;
}
.b-liked{opacity:0;pointer-events:none;background:var(--pink)}
.b-liked::after{background:var(--pink)}
.burst-pill{
position:absolute;top:18px;right:18px;z-index:9;
background:#FFD60A;color:var(--ink);font-size:10px;font-weight:900;letter-spacing:.12em;
padding:7px 10px;border-radius:999px;transform:rotate(7deg) scale(.4);opacity:0;
box-shadow:0 8px 18px rgba(0,0,0,.14);
}
/* ---------- THE BUTTON ---------- */
.like-btn{
position:relative;display:block;width:240px;height:240px;margin:2px auto 2px;
cursor:pointer;user-select:none;-webkit-user-select:none;
}
.like-btn::before{
content:"";position:absolute;left:50%;top:50%;width:180px;height:180px;border-radius:50%;
transform:translate(-50%,-50%);
background:radial-gradient(circle, rgba(255,46,99,.20), transparent 66%);
animation:idlePulse 2.2s ease-out infinite;z-index:0;
}
.rays{
position:absolute;left:50%;top:50%;width:430px;height:430px;border-radius:50%;
transform:translate(-50%,-50%);opacity:0;transition:opacity .4s ease;z-index:0;pointer-events:none;
background:repeating-conic-gradient(from 0deg, rgba(255,46,99,.16) 0 11deg, transparent 11deg 24deg);
}
.ring{
position:absolute;left:50%;top:50%;width:150px;height:150px;border-radius:50%;
border:4px solid var(--pink);opacity:0;transform:translate(-50%,-50%) scale(.55);
pointer-events:none;z-index:4;
}
.r1{--rd:0s}.r2{--rd:.16s;border-color:var(--orange)}.r3{--rd:.32s;border-color:#7B61FF}
.btn-shadow{
position:absolute;left:50%;bottom:38px;width:112px;height:16px;border-radius:50%;
background:rgba(21,21,39,.18);filter:blur(7px);transform:translateX(-50%);z-index:1;
}
.heart{
position:relative;z-index:3;width:110px;height:100px;margin:0 auto;
top:50%;transform:translateY(-58%);
filter:drop-shadow(0 10px 16px rgba(80,80,120,.24));
animation:idleBeat 2.4s ease-in-out infinite;
transition:filter .3s ease;
}
.heart::before,.heart::after{
content:"";position:absolute;top:0;width:55px;height:88px;
background:linear-gradient(135deg,#EEF0F7,#CBD0E0);
border-radius:55px 55px 0 0;transition:background .35s ease;
}
.heart::before{left:55px;transform:rotate(-45deg);transform-origin:0 100%}
.heart::after{left:0;transform:rotate(45deg);transform-origin:100% 100%}
.heart-shine{
position:absolute;z-index:4;top:15px;left:24px;width:28px;height:13px;
background:rgba(255,255,255,.75);border-radius:50%;transform:rotate(-24deg);filter:blur(1px);
}
.like-btn:hover .heart{filter:drop-shadow(0 12px 20px rgba(255,46,99,.30)) brightness(1.05)}
/* particles */
.particle{
position:absolute;left:50%;top:50%;width:13px;height:13px;background:var(--c,#FF2E63);
opacity:0;pointer-events:none;z-index:5;transform:translate(-50%,-50%) scale(0);
}
.round{border-radius:50%}
.square{border-radius:3px;width:11px;height:11px}
.rect{width:20px;height:7px;border-radius:2px}
.tri{width:17px;height:15px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.star{width:19px;height:19px;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.p1{--tx:-150px;--ty:-70px;--r:140deg;--c:#FF2E63;--d:0s}
.p2{--tx:150px;--ty:-70px;--r:-120deg;--c:#FF8A00;--d:.02s}
.p3{--tx:-162px;--ty:8px;--r:200deg;--c:#FFD60A;--d:.04s}
.p4{--tx:162px;--ty:8px;--r:-180deg;--c:#7B61FF;--d:.01s}
.p5{--tx:-132px;--ty:82px;--r:90deg;--c:#00C2FF;--d:.06s}
.p6{--tx:132px;--ty:82px;--r:260deg;--c:#06D6A0;--d:.03s}
.p7{--tx:-82px;--ty:-142px;--r:160deg;--c:#FF6B6B;--d:.05s}
.p8{--tx:82px;--ty:-142px;--r:-90deg;--c:#FF2E63;--d:0s}
.p9{--tx:-52px;--ty:152px;--r:110deg;--c:#FF8A00;--d:.07s}
.p10{--tx:52px;--ty:152px;--r:-210deg;--c:#7B61FF;--d:.02s}
.p11{--tx:-114px;--ty:-128px;--r:300deg;--c:#FFD60A;--d:.08s}
.p12{--tx:114px;--ty:-128px;--r:45deg;--c:#00C2FF;--d:.04s}
.p13{--tx:-170px;--ty:62px;--r:180deg;--c:#06D6A0;--d:.09s}
.p14{--tx:170px;--ty:62px;--r:-140deg;--c:#FF2E63;--d:.06s}
.p15{--tx:-28px;--ty:-168px;--r:220deg;--c:#FF8A00;--d:.03s}
.p16{--tx:28px;--ty:168px;--r:-60deg;--c:#FF6B6B;--d:.05s}
.p17{--tx:-98px;--ty:140px;--r:75deg;--c:#7B61FF;--d:.1s}
.p18{--tx:98px;--ty:140px;--r:190deg;--c:#FFD60A;--d:.08s}
.floater{
position:absolute;left:50%;top:50%;font-size:22px;line-height:1;color:var(--pink);
opacity:0;transform:translate(-50%,-50%);pointer-events:none;z-index:6;
}
.f1{--fx:-46px;--d:.22s;font-size:26px;color:#FF2E63}
.f2{--fx:34px;--d:.34s;font-size:19px;color:#FF8A00}
.f3{--fx:-12px;--d:.42s;font-size:30px;color:#FF4D6D}
.f4{--fx:58px;--d:.5s;font-size:17px;color:#7B61FF}
.f5{--fx:-64px;--d:.58s;font-size:16px;color:#FF6B6B}
/* status + count */
.status{position:relative;height:30px;margin-top:2px}
.status span{
position:absolute;left:0;right:0;top:0;font-size:17px;font-weight:800;letter-spacing:-.01em;
transition:opacity .25s ease;
}
.s-unliked{color:var(--muted)}
.s-liked{opacity:0;color:var(--pink)}
.likes-box{
position:relative;display:inline-flex;align-items:center;gap:9px;margin-top:8px;
background:#fff;border:1px solid rgba(21,21,39,.08);border-radius:999px;padding:8px 16px;
box-shadow:0 4px 14px rgba(21,21,39,.06);
}
.likes-label{font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.likes-count{position:relative;width:58px;height:20px;display:inline-block}
.likes-count span{position:absolute;left:0;right:0;top:0;font-size:16px;font-weight:900;transition:opacity .25s ease}
.c-liked{opacity:0;color:var(--pink)}
.heart-mini{color:var(--pink);font-size:16px}
.delta{
position:absolute;right:-8px;top:-14px;background:var(--pink);color:#fff;
font-size:11px;font-weight:900;padding:3px 7px;border-radius:999px;opacity:0;
}
.toggle-hint{margin-top:14px;font-size:12px;color:var(--muted);font-weight:600}
.features{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px;max-width:760px}
.feat{
display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.72);
border:1px solid rgba(255,255,255,.9);border-radius:16px;padding:11px 15px;text-align:left;
box-shadow:0 6px 18px rgba(21,21,39,.05);
}
.feat strong{font-size:18px;color:var(--pink);letter-spacing:-.03em}
.feat span{font-size:12px;line-height:1.25;font-weight:700;color:var(--ink)}
.footnote{margin-top:16px;font-size:13px;line-height:1.5;color:var(--muted);text-align:center;max-width:540px;font-weight:500}
/* ---------- CHECKED STATE : THE CHAOS ---------- */
input:checked ~ .page .page-glow{opacity:1}
input:checked ~ .page .bh{color:var(--pink);opacity:.34;animation-duration:2.4s}
input:checked ~ .page .b1{opacity:.75;transform:scale(1.18)}
input:checked ~ .page .card{animation:shake .58s cubic-bezier(.36,.07,.19,.97) both}
input:checked ~ .page .crazy{animation:wiggleTitle .65s ease both}
input:checked ~ .page .burst-pill{animation:pillPop .5s .18s cubic-bezier(.34,1.56,.64,1) both}
input:checked ~ .page .rays{opacity:1;animation:spinRays 22s linear infinite}
input:checked ~ .page .like-btn::before{animation-duration:1s}
input:checked ~ .page .heart{
animation:heartPop .78s cubic-bezier(.36,.07,.19,.97) both, beat 1.35s .78s ease-in-out infinite;
filter:drop-shadow(0 16px 26px rgba(255,46,99,.48)) saturate(1.15);
}
input:checked ~ .page .heart::before,
input:checked ~ .page .heart::after{
background:linear-gradient(135deg,#FF6B8A,#FF2E63 55%,#FF7A3D);
}
input:checked ~ .page .ring{animation:ringExpand 1.05s ease-out var(--rd) both}
input:checked ~ .page .particle{animation:burst .95s cubic-bezier(.17,.89,.32,1) var(--d,0s) both}
input:checked ~ .page .floater{animation:rise 2s ease-out var(--d,0s) both}
input:checked ~ .page .b-unliked{opacity:0;transform:translateX(-50%) translateY(-6px) scale(.85)}
input:checked ~ .page .b-liked{opacity:1;animation:bob 1.2s ease-in-out infinite}
input:checked ~ .page .s-unliked{opacity:0}
input:checked ~ .page .s-liked{animation:statusPop .55s .1s cubic-bezier(.34,1.56,.64,1) both}
input:checked ~ .page .c-unliked{opacity:0}
input:checked ~ .page .c-liked{animation:statusPop .5s .15s cubic-bezier(.34,1.56,.64,1) both}
input:checked ~ .page .delta{animation:deltaUp 1.7s .2s ease-out both}
/* ---------- KEYFRAMES ---------- */
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
@keyframes gradMove{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes floatY{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-18px) rotate(10deg)}}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}
@keyframes idlePulse{0%{transform:translate(-50%,-50%) scale(.68);opacity:.85}100%{transform:translate(-50%,-50%) scale(1.28);opacity:0}}
@keyframes idleBeat{0%,100%{transform:translateY(-58%) scale(1)}12%{transform:translateY(-58%) scale(1.05)}24%{transform:translateY(-58%) scale(1)}38%{transform:translateY(-58%) scale(1.03)}}
@keyframes heartPop{
0%{transform:translateY(-58%) scale(1) rotate(0deg)}
18%{transform:translateY(-58%) scale(1.5) rotate(-9deg)}
34%{transform:translateY(-58%) scale(.8) rotate(7deg)}
50%{transform:translateY(-58%) scale(1.32) rotate(-5deg)}
66%{transform:translateY(-58%) scale(.9) rotate(3deg)}
82%{transform:translateY(-58%) scale(1.14) rotate(-1deg)}
100%{transform:translateY(-58%) scale(1) rotate(0deg)}
}
@keyframes beat{0%,100%{transform:translateY(-58%) scale(1)}15%{transform:translateY(-58%) scale(1.14)}30%{transform:translateY(-58%) scale(1)}46%{transform:translateY(-58%) scale(1.09)}62%{transform:translateY(-58%) scale(1)}}
@keyframes burst{
0%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:1}
14%{transform:translate(-50%,-50%) scale(1.35) rotate(24deg);opacity:1}
100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.75) rotate(var(--r,180deg));opacity:0}
}
@keyframes rise{
0%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:0}
18%{opacity:1;transform:translate(calc(-50% - 14px),-118px) scale(1) rotate(-10deg)}
100%{transform:translate(calc(-50% + var(--fx)),-248px) scale(1.25) rotate(16deg);opacity:0}
}
@keyframes ringExpand{
0%{opacity:.9;transform:translate(-50%,-50%) scale(.5);border-width:7px}
100%{opacity:0;transform:translate(-50%,-50%) scale(3.4);border-width:1px}
}
@keyframes spinRays{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes shake{
0%,100%{transform:translate(0,0) rotate(0deg)}
12%{transform:translate(-7px,3px) rotate(-.6deg)}
28%{transform:translate(6px,-3px) rotate(.6deg)}
44%{transform:translate(-5px,-2px) rotate(-.4deg)}
60%{transform:translate(5px,2px) rotate(.4deg)}
78%{transform:translate(-3px,1px) rotate(-.2deg)}
}
@keyframes wiggleTitle{
0%{transform:rotate(0deg) scale(1)}
25%{transform:rotate(-3deg) scale(1.14)}
50%{transform:rotate(3deg) scale(1.2)}
75%{transform:rotate(-2deg) scale(1.1)}
100%{transform:rotate(0deg) scale(1.06)}
}
@keyframes statusPop{
0%{opacity:0;transform:translateY(9px) scale(.6)}
62%{opacity:1;transform:translateY(-2px) scale(1.09)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes deltaUp{
0%{opacity:0;transform:translateY(8px) scale(.5) rotate(-8deg)}
28%{opacity:1;transform:translateY(0) scale(1.15) rotate(4deg)}
70%{opacity:1;transform:translateY(-12px) scale(1)}
100%{opacity:0;transform:translateY(-24px) scale(.9)}
}
@keyframes pillPop{
0%{opacity:0;transform:rotate(7deg) scale(.3)}
100%{opacity:1;transform:rotate(7deg) scale(1)}
}
@media (max-width:640px){
.page{padding:18px 14px 28px}
.pill-right{display:none}
.hero-text{margin:24px 0 18px}
.card{padding:22px 14px 20px;border-radius:26px}
.like-btn{width:204px;height:204px}
.heart{width:92px;height:84px}
.heart::before,.heart::after{width:46px;height:74px}
.heart::before{left:46px}
.heart-shine{left:20px;top:12px;width:23px;height:11px}
.rays{width:340px;height:340px}
.feat{flex:1 1 42%;padding:10px 12px}
.burst-pill{top:12px;right:12px}
.bubble span{font-size:12px}
}
</style>
</head>
<body>
<input type="checkbox" id="like-toggle" class="hidden-toggle" aria-label="Like toggle">
<div class="page">
<div class="page-glow"></div>
<div class="blob b1"></div><div class="blob b2"></div><div class="blob b3"></div>
<span class="bh bh1">♥</span><span class="bh bh2">♥</span><span class="bh bh3">♥</span>
<span class="bh bh4">♥</span><span class="bh bh5">♥</span><span class="bh bh6">♥</span>
<header class="topbar">
<div class="badge"><span class="dot"></span>PURE CSS • ZERO JAVASCRIPT</div>
<div class="pill-right">CHECKBOX HACK #003</div>
</header>
<div class="hero-text">
<h1>The <span class="like-word">Like</span> Button<br>but make it <span class="crazy">CRAZY.</span></h1>
<p>One innocent heart. One absolutely <strong>unhinged explosion</strong>.<br>Go on — click it. Click it again.</p>
</div>
<main class="card">
<div class="burst-pill">BURST MODE: ON</div>
<div class="bubble">
<span class="b-unliked">Psst — click me! ↓</span>
<span class="b-liked">YES! Again! AGAIN!</span>
</div>
<label for="like-toggle" class="like-btn" aria-label="Like">
<span class="rays"></span>
<span class="btn-shadow"></span>
<span class="ring r1"></span><span class="ring r2"></span><span class="ring r3"></span>
<span class="heart"><span class="heart-shine"></span></span>
<span class="particle round p1"></span><span class="particle square p2"></span>
<span class="particle star p3"></span><span class="particle round p4"></span>
<span class="particle tri p5"></span><span class="particle square p6"></span>
<span class="particle round p7"></span><span class="particle rect p8"></span>
<span class="particle star p9"></span><span class="particle round p10"></span>
<span class="particle tri p11"></span><span class="particle square p12"></span>
<span class="particle round p13"></span><span class="particle star p14"></span>
<span class="particle rect p15"></span><span class="particle round p16"></span>
<span class="particle square p17"></span><span class="particle tri p18"></span>
<span class="floater f1">♥</span><span class="floater f2">♥</span>
<span class="floater f3">♥</span><span class="floater f4">♥</span><span class="floater f5">♥</span>
</label>
<div class="status">
<span class="s-unliked">Not liked yet</span>
<span class="s-liked">You liked it! ♥</span>
</div>
<div>
<div class="likes-box">
<span class="heart-mini">♥</span>
<span class="likes-label">LIKES</span>
<span class="likes-count">
<span class="c-unliked">1,284</span>
<span class="c-liked">1,285</span>
</span>
<span class="delta">+1</span>
</div>
</div>
<p class="toggle-hint">Click to toggle — the chaos replays every single time.</p>
</main>
<div class="features">
<div class="feat"><strong>01</strong><span>Checkbox<br>Hack</span></div>
<div class="feat"><strong>02</strong><span>18 Particles<br>Exploding</span></div>
<div class="feat"><strong>03</strong><span>Screen Shake<br>+ Shockwaves</span></div>
<div class="feat"><strong>04</strong><span>0 Lines<br>of JS</span></div>
</div>
<p class="footnote">No JavaScript was harmed in the making of this button. Pure HTML, one sneaky checkbox, and an unreasonable amount of keyframes.</p>
</div>
</body>
</html>Reasoning trace (9,144 tokens)
Implementing a pure CSS like button with checkbox hack and click animation while ensuring single-file inline CSS and responsive layout.Extending the CSS-only animation with particle bursts, text toggle, and counter effects via sibling selectors.Expanding the CSS-only animation with screen shake, rotating rays, 3D heart flip, and gradient color morph.Structuring the HTML with a sibling input and wrapper to enable body hue shift and adding responsive and decorative CSS elements.Defining CSS-only particle burst, ring, and shake animations with custom properties and clip-path shapes.Extending CSS animations with a beat keyframe, idle pulse ring, and layout tweaks while ensuring no JavaScript is used.Defining shape clip-paths, color palette, and particle delays while extending the CSS-only animation system.Adding responsive CSS variables and media queries for mobile heart sizing and particle spread.Defining hover and active states plus stacked bubble spans and keyframe animations for UI feedback.Extending CSS with mobile media queries and focus-visible accessibility adjustments.