Exploding like buttonOne-line
Gemini 3.8 Flash
by GoogleReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 54.9 s
- Cost
- $0.041
- Output tokens
- 10,731
- Spent thinking
- 971 tokens
- Speed
- 202.9 tok/s
- Console errors
- 0
- First token after
- 2.0 s
- First visible text after
- 9.7 s
- Prompt tokens
- 362
- Code size
- 23.0 KB
- Finish reason
- stop
- Served by
- Model id
google/gemini-3.8-flash- Reasoning sent
{"effort":"medium"}- Max output
- 65,536 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 · 840 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ultimate Pure CSS Like Button</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: radial-gradient(circle at 50% 40%, #1a162b 0%, #0d0a17 60%, #05040a 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
color: #fff;
overflow-x: hidden;
perspective: 1200px;
}
/* Ambient celebratory glow triggered by checked */
.ambient-light {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 45, 117, 0.25) 0%, rgba(255, 120, 71, 0.1) 45%, transparent 70%);
pointer-events: none;
opacity: 0.3;
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
filter: blur(40px);
z-index: 0;
}
/* Presentation Wrapper */
.stage {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.heading-block {
text-align: center;
pointer-events: none;
user-select: none;
}
.badge {
display: inline-block;
padding: 6px 14px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 20px;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #ff6b9d;
margin-bottom: 12px;
backdrop-filter: blur(8px);
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
h1 {
font-size: 32px;
font-weight: 800;
background: linear-gradient(135deg, #ffffff 30%, #a5a1c9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.5px;
}
.hint {
margin-top: 6px;
font-size: 14px;
color: #8c86aa;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.hint-pulse {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #ff3366;
box-shadow: 0 0 8px #ff3366;
animation: beacon 1.6s infinite ease-in-out;
}
@keyframes beacon {
0%, 100% { opacity: 0.3; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.3); }
}
/* Hidden Native Checkbox */
#like-checkbox {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* Master Like Button Label */
.like-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 16px;
padding: 16px 36px 16px 26px;
background: linear-gradient(180deg, rgba(38, 33, 64, 0.9) 0%, rgba(22, 19, 41, 0.95) 100%);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 100px;
cursor: pointer;
user-select: none;
box-shadow:
0 10px 30px -5px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 1px 1px rgba(255, 255, 255, 0.2),
inset 0 -2px 6px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(16px);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.25s ease,
border-color 0.25s ease,
background 0.3s ease;
}
.like-btn:hover {
transform: translateY(-2px) scale(1.02);
border-color: rgba(255, 65, 120, 0.4);
box-shadow:
0 15px 35px -5px rgba(255, 45, 117, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 1px 1px rgba(255, 255, 255, 0.3);
}
.like-btn:active {
transform: translateY(1px) scale(0.97);
}
/* Heart Icon Container */
.icon-wrap {
position: relative;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* The Main Heart SVG */
.heart-svg {
width: 36px;
height: 36px;
fill: transparent;
stroke: #8e88aa;
stroke-width: 2.3;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.3s ease, fill 0.3s ease, filter 0.3s ease;
transform-origin: center center;
position: relative;
z-index: 5;
}
.like-btn:hover .heart-svg {
stroke: #ff5287;
filter: drop-shadow(0 0 6px rgba(255, 82, 135, 0.4));
}
/* Text & Animated Counter */
.label-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.state-word {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.3px;
color: #e5e3f5;
transition: color 0.3s ease;
line-height: 1.1;
}
.counter-box {
display: flex;
align-items: center;
font-size: 13px;
font-weight: 600;
color: #7b759a;
height: 16px;
overflow: hidden;
margin-top: 2px;
}
.counter-reel {
display: flex;
flex-direction: column;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.counter-reel span {
line-height: 16px;
height: 16px;
}
/* Shockwaves */
.shockwave {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 44px;
height: 44px;
border-radius: 50%;
pointer-events: none;
z-index: 2;
opacity: 0;
}
.wave-1 {
border: 3px solid #ff2b70;
}
.wave-2 {
border: 2px solid #ffd043;
}
.wave-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,45,117,0.4) 50%, transparent 80%);
pointer-events: none;
z-index: 2;
}
/* Particle Sparks (Sunburst Lines) */
.spark-burst {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
pointer-events: none;
z-index: 4;
}
.ray {
position: absolute;
top: -12px;
left: -2px;
width: 4px;
height: 24px;
transform-origin: 2px 12px;
opacity: 0;
}
.ray::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 10px;
border-radius: 4px;
background: linear-gradient(to bottom, #fff, #ff2f76);
}
.ray:nth-child(1) { transform: rotate(0deg) translateY(-26px); }
.ray:nth-child(2) { transform: rotate(45deg) translateY(-26px); }
.ray:nth-child(3) { transform: rotate(90deg) translateY(-26px); }
.ray:nth-child(4) { transform: rotate(135deg) translateY(-26px); }
.ray:nth-child(5) { transform: rotate(180deg) translateY(-26px); }
.ray:nth-child(6) { transform: rotate(225deg) translateY(-26px); }
.ray:nth-child(7) { transform: rotate(270deg) translateY(-26px); }
.ray:nth-child(8) { transform: rotate(315deg) translateY(-26px); }
/* Floating Hearts & Confetti Shards */
.particle-cloud {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
pointer-events: none;
z-index: 6;
}
.p {
position: absolute;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Flying mini-hearts */
.p-heart {
font-size: 14px;
}
/* Shimmer Stars & Dots */
.p-star {
font-size: 15px;
color: #ffe668;
filter: drop-shadow(0 0 6px #ffd13b);
}
.p-dot {
width: 7px;
height: 7px;
border-radius: 50%;
}
.d1 { background: #00f0ff; box-shadow: 0 0 8px #00f0ff; }
.d2 { background: #ff2a7a; box-shadow: 0 0 8px #ff2a7a; }
.d3 { background: #ffd000; box-shadow: 0 0 8px #ffd000; }
.d4 { background: #9d4edd; box-shadow: 0 0 8px #9d4edd; }
.d5 { background: #00ff88; box-shadow: 0 0 8px #00ff88; }
.d6 { background: #ff7700; box-shadow: 0 0 8px #ff7700; }
/* Confetti Ribbons */
.p-ribbon {
width: 5px;
height: 12px;
border-radius: 2px;
}
.r1 { background: #ff3366; }
.r2 { background: #00e5ff; }
.r3 { background: #ffe600; }
.r4 { background: #a855f7; }
/* Floating +1 Pill Badge */
.floating-plus {
position: absolute;
top: -6px;
right: 28px;
background: linear-gradient(135deg, #ff2f76, #ff8442);
color: #fff;
font-weight: 800;
font-size: 13px;
padding: 3px 9px;
border-radius: 12px;
opacity: 0;
transform: translateY(0) scale(0.4);
pointer-events: none;
box-shadow: 0 4px 15px rgba(255, 47, 118, 0.6);
letter-spacing: 0.5px;
z-index: 10;
}
/* ========================================================
THE CRAZY ANIMATIONS (TRIGGERED VIA :checked)
======================================================== */
/* Checked Ambient Light Flare */
#like-checkbox:checked ~ .ambient-light {
opacity: 0.85;
transform: translate(-50%, -50%) scale(1.35);
}
/* Button Frame Bounce & Glow */
#like-checkbox:checked + .stage .like-btn {
border-color: rgba(255, 45, 117, 0.6);
background: linear-gradient(180deg, rgba(50, 30, 65, 0.95) 0%, rgba(28, 17, 45, 0.98) 100%);
box-shadow:
0 12px 40px -5px rgba(255, 45, 117, 0.45),
0 0 30px rgba(255, 45, 117, 0.25),
inset 0 1px 2px rgba(255, 255, 255, 0.4),
inset 0 -2px 6px rgba(0, 0, 0, 0.5);
animation: btnImpact 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes btnImpact {
0% { transform: scale(1); }
20% { transform: scale(0.9) translateY(4px); }
45% { transform: scale(1.1) translateY(-6px); }
65% { transform: scale(0.97) translateY(1px); }
80% { transform: scale(1.02) translateY(-1px); }
100% { transform: scale(1) translateY(0); }
}
/* Heart Pop, Morph & Elastic Overshoot */
#like-checkbox:checked + .stage .heart-svg {
stroke: url(#heartGradient);
fill: url(#heartGradient);
filter: drop-shadow(0 0 16px rgba(255, 47, 118, 0.85)) drop-shadow(0 0 30px rgba(255, 130, 45, 0.5));
animation: crazyHeartPop 0.85s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards;
}
@keyframes crazyHeartPop {
0% {
transform: scale(1) rotate(0deg);
}
15% {
transform: scale(0.55) rotate(-22deg);
}
30% {
transform: scale(1.55) rotate(16deg);
}
45% {
transform: scale(0.85) rotate(-10deg);
}
60% {
transform: scale(1.22) rotate(6deg);
}
75% {
transform: scale(0.95) rotate(-2deg);
}
90% {
transform: scale(1.08) rotate(1deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
/* Shockwaves Expanding */
#like-checkbox:checked + .stage .wave-1 {
animation: blastWave1 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes blastWave1 {
0% {
transform: translate(-50%, -50%) scale(0.3);
opacity: 1;
border-width: 6px;
}
70% {
opacity: 0.8;
}
100% {
transform: translate(-50%, -50%) scale(2.8);
opacity: 0;
border-width: 0px;
}
}
#like-checkbox:checked + .stage .wave-2 {
animation: blastWave2 0.85s 0.08s cubic-bezier(0.15, 0.85, 0.35, 1) forwards;
}
@keyframes blastWave2 {
0% {
transform: translate(-50%, -50%) scale(0.4);
opacity: 1;
border-width: 4px;
}
100% {
transform: translate(-50%, -50%) scale(3.4);
opacity: 0;
border-width: 0px;
}
}
#like-checkbox:checked + .stage .wave-ring {
animation: flashCenter 0.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes flashCenter {
0% {
transform: translate(-50%, -50%) scale(0.2);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(6.5);
opacity: 0;
}
}
/* Spark Rays Bursting */
#like-checkbox:checked + .stage .ray {
animation: rayShoot 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}
@keyframes rayShoot {
0% {
opacity: 1;
height: 24px;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
height: 0px;
transform: var(--dest-transform);
}
}
.ray:nth-child(1) { --dest-transform: rotate(0deg) translateY(-54px); }
.ray:nth-child(2) { --dest-transform: rotate(45deg) translateY(-54px); }
.ray:nth-child(3) { --dest-transform: rotate(90deg) translateY(-54px); }
.ray:nth-child(4) { --dest-transform: rotate(135deg) translateY(-54px); }
.ray:nth-child(5) { --dest-transform: rotate(180deg) translateY(-54px); }
.ray:nth-child(6) { --dest-transform: rotate(225deg) translateY(-54px); }
.ray:nth-child(7) { --dest-transform: rotate(270deg) translateY(-54px); }
.ray:nth-child(8) { --dest-transform: rotate(315deg) translateY(-54px); }
/* Crazy Particle Cloud Eruption */
#like-checkbox:checked + .stage .p {
animation-timing-function: cubic-bezier(0.12, 0.8, 0.32, 1);
animation-fill-mode: forwards;
}
/* Micro Hearts Radiating Outward */
#like-checkbox:checked + .stage .h1 { animation: flyH1 0.95s 0.02s; }
#like-checkbox:checked + .stage .h2 { animation: flyH2 0.9s 0.05s; }
#like-checkbox:checked + .stage .h3 { animation: flyH3 1.05s 0.01s; }
#like-checkbox:checked + .stage .h4 { animation: flyH4 0.88s 0.04s; }
#like-checkbox:checked + .stage .h5 { animation: flyH5 1.1s 0.02s; }
@keyframes flyH1 {
0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
50% { opacity: 1; }
100% { transform: translate(-75px, -90px) scale(1.4) rotate(-35deg); opacity: 0; }
}
@keyframes flyH2 {
0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
50% { opacity: 1; }
100% { transform: translate(80px, -85px) scale(1.3) rotate(40deg); opacity: 0; }
}
@keyframes flyH3 {
0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
50% { opacity: 1; }
100% { transform: translate(-95px, 20px) scale(1.1) rotate(-65deg); opacity: 0; }
}
@keyframes flyH4 {
0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
50% { opacity: 1; }
100% { transform: translate(90px, 30px) scale(1.2) rotate(50deg); opacity: 0; }
}
@keyframes flyH5 {
0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
50% { opacity: 1; }
100% { transform: translate(0px, -115px) scale(1.5) rotate(-15deg); opacity: 0; }
}
/* Stars */
#like-checkbox:checked + .stage .s1 { animation: flyS1 0.8s 0.03s; }
#like-checkbox:checked + .stage .s2 { animation: flyS2 0.85s 0.06s; }
#like-checkbox:checked + .stage .s3 { animation: flyS3 0.75s 0.02s; }
@keyframes flyS1 {
0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
100% { transform: translate(-50px, -110px) scale(1.3) rotate(220deg); opacity: 0; }
}
@keyframes flyS2 {
0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
100% { transform: translate(65px, -100px) scale(1.4) rotate(-240deg); opacity: 0; }
}
@keyframes flyS3 {
0% { transform: translate(0, 0) scale(0.2) rotate(0deg); opacity: 1; }
100% { transform: translate(-40px, 75px) scale(1.1) rotate(180deg); opacity: 0; }
}
/* Colored Sparkle Dots */
#like-checkbox:checked + .stage .d1 { animation: flyD1 0.8s 0.01s; }
#like-checkbox:checked + .stage .d2 { animation: flyD2 0.9s 0.04s; }
#like-checkbox:checked + .stage .d3 { animation: flyD3 0.7s 0.02s; }
#like-checkbox:checked + .stage .d4 { animation: flyD4 0.85s 0.05s; }
#like-checkbox:checked + .stage .d5 { animation: flyD5 0.75s 0.03s; }
#like-checkbox:checked + .stage .d6 { animation: flyD6 0.95s 0.06s; }
@keyframes flyD1 {
0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
100% { transform: translate(-80px, -45px) scale(1.5); opacity: 0; }
}
@keyframes flyD2 {
0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
100% { transform: translate(85px, -40px) scale(1.6); opacity: 0; }
}
@keyframes flyD3 {
0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
100% { transform: translate(-30px, -80px) scale(1.2); opacity: 0; }
}
@keyframes flyD4 {
0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
100% { transform: translate(45px, 70px) scale(1.4); opacity: 0; }
}
@keyframes flyD5 {
0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
100% { transform: translate(-70px, 60px) scale(1.3); opacity: 0; }
}
@keyframes flyD6 {
0% { transform: translate(0, 0) scale(0.2); opacity: 1; }
100% { transform: translate(110px, -10px) scale(1.5); opacity: 0; }
}
/* Ribbons Spinning */
#like-checkbox:checked + .stage .r1 { animation: flyR1 0.9s 0.02s; }
#like-checkbox:checked + .stage .r2 { animation: flyR2 0.85s 0.04s; }
#like-checkbox:checked + .stage .r3 { animation: flyR3 1s 0.01s; }
#like-checkbox:checked + .stage .r4 { animation: flyR4 0.95s 0.05s; }
@keyframes flyR1 {
0% { transform: translate(0, 0) rotate(0deg) scale(0.2); opacity: 1; }
100% { transform: translate(-105px, -70px) rotate(420deg) scale(1.2); opacity: 0; }
}
@keyframes flyR2 {
0% { transform: translate(0, 0) rotate(0deg) scale(0.2); opacity: 1; }
100% { transform: translate(115px, -65px) rotate(-380deg) scale(1.1); opacity: 0; }
}
@keyframes flyR3 {
0% { transform: translate(0, 0) rotate(0deg) scale(0.2); opacity: 1; }
100% { transform: translate(-60px, -125px) rotate(320deg) scale(1); opacity: 0; }
}
@keyframes flyR4 {
0% { transform: translate(0, 0) rotate(0deg) scale(0.2); opacity: 1; }
100% { transform: translate(70px, 95px) rotate(-450deg) scale(1.3); opacity: 0; }
}
/* Floating +1 Pop Launch */
#like-checkbox:checked + .stage .floating-plus {
animation: launchPlus 0.9s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes launchPlus {
0% {
opacity: 0;
transform: translateY(5px) scale(0.4) rotate(-15deg);
}
35% {
opacity: 1;
transform: translateY(-24px) scale(1.2) rotate(6deg);
}
70% {
opacity: 1;
transform: translateY(-38px) scale(1.05) rotate(0deg);
}
100% {
opacity: 0;
transform: translateY(-56px) scale(0.8);
}
}
/* Counter Increment Reel Transition */
#like-checkbox:checked + .stage .counter-reel {
transform: translateY(-16px);
}
#like-checkbox:checked + .stage .state-word {
color: #ff3377;
text-shadow: 0 0 12px rgba(255, 51, 119, 0.6);
}
/* Change State Word Text via pseudo-element */
.state-word::after {
content: "Like";
display: inline-block;
}
#like-checkbox:checked + .stage .state-word::after {
content: "Liked!";
}
/* Floating Decorative Stars in the background */
.bg-decor {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.star-orbit {
position: absolute;
width: 2px;
height: 2px;
background: #fff;
border-radius: 50%;
opacity: 0.25;
animation: twinkle 3s infinite alternate ease-in-out;
}
@keyframes twinkle {
0% { opacity: 0.1; transform: scale(0.8); }
100% { opacity: 0.7; transform: scale(1.8); filter: drop-shadow(0 0 4px #fff); }
}
/* Position decorative background stars */
.so1 { top: 22%; left: 18%; animation-delay: 0.2s; }
.so2 { top: 35%; right: 22%; animation-delay: 0.7s; }
.so3 { top: 70%; left: 25%; animation-delay: 1.3s; }
.so4 { top: 78%; right: 28%; animation-delay: 0.9s; }
.so5 { top: 15%; right: 35%; animation-delay: 1.8s; }
.so6 { top: 82%; left: 40%; animation-delay: 0.4s; }
/* Reset prompt button */
.reset-tip {
font-size: 12px;
color: #5d577a;
letter-spacing: 0.5px;
transition: color 0.3s;
user-select: none;
}
#like-checkbox:checked + .stage .reset-tip {
color: #9d96c2;
}
</style>
</head>
<body>
<!-- Background Ambience -->
<div class="bg-decor">
<div class="star-orbit so1"></div>
<div class="star-orbit so2"></div>
<div class="star-orbit so3"></div>
<div class="star-orbit so4"></div>
<div class="star-orbit so5"></div>
<div class="star-orbit so6"></div>
</div>
<!-- Ambient Glow Behind Stage -->
<div class="ambient-light"></div>
<!-- Checkbox State Engine -->
<input type="checkbox" id="like-checkbox" aria-label="Toggle Like State">
<!-- Interactive Stage -->
<div class="stage">
<div class="heading-block">
<div class="badge">100% Pure CSS • No JavaScript</div>
<h1>Interactive Like Button</h1>
<div class="hint">
<span class="hint-pulse"></span>
<span>Click the button to release the madness</span>
</div>
</div>
<!-- The Like Button Component -->
<label for="like-checkbox" class="like-btn" title="Click to Like!">
<!-- Shockwaves & Rings -->
<div class="shockwave wave-1"></div>
<div class="shockwave wave-2"></div>
<div class="wave-ring"></div>
<!-- Sunburst Radial Rays -->
<div class="spark-burst">
<div class="ray"></div>
<div class="ray"></div>
<div class="ray"></div>
<div class="ray"></div>
<div class="ray"></div>
<div class="ray"></div>
<div class="ray"></div>
<div class="ray"></div>
</div>
<!-- Explosive Particle Cloud (Hearts, Stars, Dots, Confetti) -->
<div class="particle-cloud">
<!-- Floating hearts -->
<span class="p p-heart h1">💖</span>
<span class="p p-heart h2">💗</span>
<span class="p p-heart h3">💝</span>
<span class="p p-heart h4">💕</span>
<span class="p p-heart h5">🔥</span>
<!-- Sparkling Stars -->
<span class="p p-star s1">✨</span>
<span class="p p-star s2">⚡</span>
<span class="p p-star s3">⭐</span>
<!-- Glowing Neon Dots -->
<span class="p p-dot d1"></span>
<span class="p p-dot d2"></span>
<span class="p p-dot d3"></span>
<span class="p p-dot d4"></span>
<span class="p p-dot d5"></span>
<span class="p p-dot d6"></span>
<!-- Spinning Confetti Strips -->
<span class="p p-ribbon r1"></span>
<span class="p p-ribbon r2"></span>
<span class="p p-ribbon r3"></span>
<span class="p p-ribbon r4"></span>
</div>
<!-- Floating +1 Pill Badge -->
<div class="floating-plus">+1</div>
<!-- Heart Icon Container -->
<div class="icon-wrap">
<svg class="heart-svg" viewBox="0 0 24 24">
<defs>
<linearGradient id="heartGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff1a68" />
<stop offset="50%" stop-color="#ff3377" />
<stop offset="100%" stop-color="#ff9900" />
</linearGradient>
</defs>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</svg>
</div>
<!-- Button Text & Live Counter Reel -->
<div class="label-text">
<span class="state-word"></span>
<div class="counter-box">
<div class="counter-reel">
<span>2,499</span>
<span>2,500</span>
</div>
</div>
</div>
</label>
<div class="reset-tip">Click again anytime to toggle back</div>
</div>
</body>
</html>Reasoning trace (971 tokens)
**Designing Crazy Animations** I'm exploring ways to create a wild CSS animation for a "like" button without any JavaScript. The checkbox `:checked` pseudo-class seems the most promising approach to achieve the toggle functionality needed for the animation to trigger and persist. **Achieving Complex States** I'm digging into CSS `:checked` states for a robust, JavaScript-free interaction. My focus is on ensuring the "liked" state persists and beautifully orchestrates the subsequent cascade of particle bursts, shockwaves, and 3D transformations. **Implementing Crazy Effects** I'm detailing the animation's architecture, focusing on a checkbox hack and a structured label element to house the intricate CSS elements. This includes planning for SVG hearts, dynamic shockwaves, numerous particles, and glassmorphic styling for the button itself, aiming for a visually stunning, pure CSS experience. **Orchestrating CSS Animations** I'm refining the animation sequence, focusing on a satisfying squash-and-stretch for the initial click, followed by explosive concentric shockwaves and radiant light beams. I'll then add a stream of floating particles and a celebratory "+1" bubble.