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
- 1 min 1 s
- Cost
- $0.046
- Output tokens
- 12,099
- Spent thinking
- 570 tokens
- Speed
- 204.3 tok/s
- Console errors
- 0
- First token after
- 2.3 s
- First visible text after
- 6.9 s
- Prompt tokens
- 362
- Code size
- 27.4 KB
- Finish reason
- stop
- Served by
- Model id
google/gemini-3.8-flash- Reasoning sent
model default- 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 · 881 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Crazy Like Button</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
-webkit-user-select: none;
}
:root {
--bg-dark: #0a0a14;
--card-bg: rgba(22, 22, 38, 0.75);
--heart-start: #ff2a6d;
--heart-mid: #ff6200;
--heart-end: #ff007b;
--gold: #ffd166;
--cyan: #05d9e8;
--purple: #b5179e;
--lime: #00f5d4;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: radial-gradient(circle at 50% 30%, #201135 0%, var(--bg-dark) 70%);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
overflow: hidden;
position: relative;
}
/* Ambient background floating orbs */
.ambient-glow {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 42, 109, 0.18) 0%, transparent 65%);
filter: blur(40px);
pointer-events: none;
animation: floatAmbient 12s ease-in-out infinite alternate;
z-index: 0;
}
.ambient-glow-2 {
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(5, 217, 232, 0.12) 0%, transparent 70%);
filter: blur(50px);
pointer-events: none;
animation: floatAmbient 10s ease-in-out infinite alternate-reverse;
top: 60%;
left: 60%;
z-index: 0;
}
@keyframes floatAmbient {
0% { transform: translate(-30px, -20px) scale(0.9); }
100% { transform: translate(40px, 30px) scale(1.15); }
}
/* Interactive Showcase Card */
.card {
position: relative;
z-index: 1;
background: var(--card-bg);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 36px;
padding: 48px 56px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
inset 0 1px 1px rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
max-width: 90vw;
}
.card-header {
text-align: center;
}
.badge {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--cyan);
background: rgba(5, 217, 232, 0.12);
border: 1px solid rgba(5, 217, 232, 0.3);
padding: 6px 14px;
border-radius: 999px;
margin-bottom: 12px;
}
.title {
color: #ffffff;
font-size: 26px;
font-weight: 700;
letter-spacing: -0.5px;
}
.subtitle {
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
margin-top: 4px;
}
/* Hidden State Controller */
#like-toggle {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* Interactive Like Button Wrapper */
.btn-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.like-label {
cursor: pointer;
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 18px 36px 18px 28px;
background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%);
border: 1.5px solid rgba(255, 255, 255, 0.16);
border-radius: 100px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4),
inset 0 1px 1px rgba(255, 255, 255, 0.25);
transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-origin: center center;
}
.like-label:hover {
transform: translateY(-2px) scale(1.03);
border-color: rgba(255, 42, 109, 0.45);
box-shadow: 0 20px 45px rgba(255, 42, 109, 0.2),
inset 0 1px 2px rgba(255, 255, 255, 0.4);
}
.like-label:active {
transform: scale(0.94);
}
/* Heart Graphic Area */
.heart-stage {
position: relative;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.heart-icon {
width: 42px;
height: 42px;
position: relative;
z-index: 10;
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.heart-icon svg {
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
/* Default Outline Heart */
.heart-outline {
fill: none;
stroke: rgba(255, 255, 255, 0.65);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: all 0.3s ease;
}
.heart-fill {
fill: url(#heartGradient);
opacity: 0;
transform-origin: 50% 50%;
transform: scale(0);
transition: all 0.3s ease;
}
/* Label text & counter */
.label-content {
display: flex;
flex-direction: column;
position: relative;
z-index: 10;
}
.action-text {
font-size: 17px;
font-weight: 700;
letter-spacing: 0.3px;
color: #ffffff;
transition: color 0.3s ease;
line-height: 1.1;
}
.counter-box {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
margin-top: 3px;
height: 16px;
overflow: hidden;
position: relative;
}
.counter-slider {
display: flex;
flex-direction: column;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.counter-item {
height: 16px;
line-height: 16px;
}
/* Floating +1 Pop Badge */
.plus-one {
position: absolute;
top: -12px;
right: 28px;
background: linear-gradient(135deg, var(--heart-start), var(--heart-mid));
color: #ffffff;
font-size: 13px;
font-weight: 800;
padding: 4px 10px;
border-radius: 999px;
opacity: 0;
transform: translateY(12px) scale(0.4);
pointer-events: none;
box-shadow: 0 4px 15px rgba(255, 42, 109, 0.6);
z-index: 20;
}
/* ================================================= */
/* CRAZY ANIMATION ELEMENTS (STAGED AROUND THE HEART) */
/* ================================================= */
/* Expanding Shockwave Rings */
.ring {
position: absolute;
border-radius: 50%;
pointer-events: none;
opacity: 0;
box-sizing: border-box;
}
.ring-main {
width: 48px;
height: 48px;
border: 4px solid var(--heart-start);
top: 0;
left: 0;
}
.ring-secondary {
width: 48px;
height: 48px;
border: 3px solid var(--cyan);
top: 0;
left: 0;
}
/* Radial Light Rays / Spike Starburst */
.spark-burst {
position: absolute;
width: 180px;
height: 180px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
pointer-events: none;
opacity: 0;
z-index: 8;
}
.ray {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 24px;
margin-left: -2px;
border-radius: 4px;
transform-origin: center -20px;
background: linear-gradient(to top, transparent, var(--gold));
}
.ray:nth-child(1) { transform: rotate(0deg) translateY(-42px); }
.ray:nth-child(2) { transform: rotate(45deg) translateY(-42px); }
.ray:nth-child(3) { transform: rotate(90deg) translateY(-42px); }
.ray:nth-child(4) { transform: rotate(135deg) translateY(-42px); }
.ray:nth-child(5) { transform: rotate(180deg) translateY(-42px); }
.ray:nth-child(6) { transform: rotate(225deg) translateY(-42px); }
.ray:nth-child(7) { transform: rotate(270deg) translateY(-42px); }
.ray:nth-child(8) { transform: rotate(315deg) translateY(-42px); }
/* Flying Particle Confetti (Circles, Stars, Ribbons) */
.confetti-layer {
position: absolute;
width: 0;
height: 0;
top: 50%;
left: 50%;
pointer-events: none;
z-index: 25;
}
.p {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* Particle specific styles */
.dot-1 { width: 10px; height: 10px; border-radius: 50%; background: var(--heart-start); }
.dot-2 { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.dot-3 { width: 12px; height: 12px; border-radius: 50%; background: var(--cyan); }
.dot-4 { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.dot-5 { width: 9px; height: 9px; border-radius: 50%; background: var(--purple); }
.dot-6 { width: 11px; height: 11px; border-radius: 50%; background: #ffffff; }
.star-1 {
width: 14px;
height: 14px;
background: var(--gold);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.star-2 {
width: 12px;
height: 12px;
background: var(--cyan);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.ribbon-1 { width: 5px; height: 16px; border-radius: 3px; background: var(--heart-mid); }
.ribbon-2 { width: 4px; height: 14px; border-radius: 3px; background: var(--lime); }
.ribbon-3 { width: 5px; height: 18px; border-radius: 3px; background: var(--purple); }
/* Flying Mini-Hearts */
.mini-heart {
position: absolute;
width: 16px;
height: 16px;
opacity: 0;
pointer-events: none;
fill: var(--heart-start);
z-index: 15;
}
/* Ambient Core Flash Flare */
.flare {
position: absolute;
width: 140px;
height: 140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: radial-gradient(circle, rgba(255, 42, 109, 0.9) 0%, rgba(255, 98, 0, 0.5) 40%, transparent 70%);
border-radius: 50%;
opacity: 0;
pointer-events: none;
z-index: 5;
}
/* ================================================= */
/* :CHECKED - THE CRAZY TRIGGER */
/* ================================================= */
/* Active Label Glowing Shell & Squish / Slam Animation */
#like-toggle:checked + .like-label {
background: linear-gradient(135deg, rgba(255, 42, 109, 0.18) 0%, rgba(255, 0, 123, 0.05) 100%);
border-color: rgba(255, 42, 109, 0.8);
box-shadow: 0 10px 40px rgba(255, 42, 109, 0.4),
inset 0 1px 2px rgba(255, 255, 255, 0.4);
animation: btnCrazyBounce 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.4);
}
@keyframes btnCrazyBounce {
0% { transform: scale(1); }
15% { transform: scale(0.85) translateY(4px); }
35% { transform: scale(1.12) translateY(-6px); }
55% { transform: scale(0.96) translateY(2px); }
75% { transform: scale(1.03) translateY(-1px); }
100% { transform: scale(1) translateY(0); }
}
/* Icon Swapping & Elastic 3D Heart Explosion */
#like-toggle:checked + .like-label .heart-outline {
opacity: 0;
transform: scale(0);
}
#like-toggle:checked + .like-label .heart-fill {
opacity: 1;
animation: heartWildPop 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.6) forwards;
}
@keyframes heartWildPop {
0% {
transform: scale(0) rotate(-45deg);
filter: brightness(2.5) drop-shadow(0 0 25px #ffffff);
}
25% {
transform: scale(1.55) rotate(15deg);
filter: brightness(1.8) drop-shadow(0 0 20px var(--heart-start));
}
45% {
transform: scale(0.85) rotate(-10deg);
}
65% {
transform: scale(1.2) rotate(5deg);
filter: drop-shadow(0 8px 18px rgba(255, 42, 109, 0.8));
}
85% {
transform: scale(0.95) rotate(-2deg);
}
100% {
transform: scale(1) rotate(0deg);
filter: drop-shadow(0 6px 16px rgba(255, 42, 109, 0.7));
}
}
/* Text Shift */
#like-toggle:checked + .like-label .action-text {
color: #ff2a6d;
text-shadow: 0 0 15px rgba(255, 42, 109, 0.5);
}
#like-toggle:checked + .like-label .counter-slider {
transform: translateY(-16px);
}
/* Floating +1 Badge Ejection */
#like-toggle:checked + .like-label .plus-one {
animation: plusOnePop 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes plusOnePop {
0% {
opacity: 0;
transform: translateY(10px) scale(0.3);
}
20% {
opacity: 1;
transform: translateY(-18px) scale(1.2) rotate(-8deg);
}
40% {
transform: translateY(-28px) scale(1) rotate(4deg);
}
75% {
opacity: 1;
transform: translateY(-40px) scale(0.95);
}
100% {
opacity: 0;
transform: translateY(-58px) scale(0.7);
}
}
/* Flare Blast */
#like-toggle:checked + .like-label .flare {
animation: flareBlast 0.6s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes flareBlast {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.1); }
30% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
/* Expanding Shockwaves */
#like-toggle:checked + .like-label .ring-main {
animation: ringExplode 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
#like-toggle:checked + .like-label .ring-secondary {
animation: ringExplode 0.85s 0.08s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes ringExplode {
0% {
opacity: 1;
transform: scale(0.3);
border-width: 6px;
}
70% {
opacity: 0.8;
}
100% {
opacity: 0;
transform: scale(3.2);
border-width: 1px;
}
}
/* Sparkle Starburst Rays */
#like-toggle:checked + .like-label .spark-burst {
animation: raysBurst 0.65s cubic-bezier(0.1, 0.85, 0.25, 1) forwards;
}
@keyframes raysBurst {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
}
30% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(1.5) rotate(45deg);
}
}
/* ============================================= */
/* CRAZY RADIAL CONFETTI FLIGHT PATHS */
/* ============================================= */
#like-toggle:checked + .like-label .p {
animation-duration: 0.9s;
animation-timing-function: cubic-bezier(0.15, 0.9, 0.25, 1);
animation-fill-mode: forwards;
}
/* Top Left Group */
#like-toggle:checked + .like-label .p1 { animation-name: fly-p1; }
#like-toggle:checked + .like-label .p2 { animation-name: fly-p2; }
#like-toggle:checked + .like-label .p3 { animation-name: fly-p3; }
/* Top Right Group */
#like-toggle:checked + .like-label .p4 { animation-name: fly-p4; }
#like-toggle:checked + .like-label .p5 { animation-name: fly-p5; }
#like-toggle:checked + .like-label .p6 { animation-name: fly-p6; }
/* Bottom Left Group */
#like-toggle:checked + .like-label .p7 { animation-name: fly-p7; }
#like-toggle:checked + .like-label .p8 { animation-name: fly-p8; }
#like-toggle:checked + .like-label .p9 { animation-name: fly-p9; }
/* Bottom Right Group */
#like-toggle:checked + .like-label .p10 { animation-name: fly-p10; }
#like-toggle:checked + .like-label .p11 { animation-name: fly-p11; }
#like-toggle:checked + .like-label .p12 { animation-name: fly-p12; }
/* Outer Orbitals */
#like-toggle:checked + .like-label .p13 { animation-name: fly-p13; }
#like-toggle:checked + .like-label .p14 { animation-name: fly-p14; }
#like-toggle:checked + .like-label .p15 { animation-name: fly-p15; }
#like-toggle:checked + .like-label .p16 { animation-name: fly-p16; }
@keyframes fly-p1 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(-75px, -85px) scale(1.1) rotate(260deg); }
}
@keyframes fly-p2 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(-45px, -115px) scale(1.2) rotate(-190deg); }
}
@keyframes fly-p3 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(-105px, -45px) scale(0.9) rotate(320deg); }
}
@keyframes fly-p4 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(65px, -95px) scale(1.3) rotate(210deg); }
}
@keyframes fly-p5 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(35px, -120px) scale(1) rotate(-310deg); }
}
@keyframes fly-p6 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(110px, -60px) scale(1.2) rotate(180deg); }
}
@keyframes fly-p7 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(-90px, 45px) scale(1.1) rotate(-220deg); }
}
@keyframes fly-p8 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(-65px, 85px) scale(1.3) rotate(270deg); }
}
@keyframes fly-p9 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(-30px, 105px) scale(0.9) rotate(-160deg); }
}
@keyframes fly-p10 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(95px, 40px) scale(1.2) rotate(340deg); }
}
@keyframes fly-p11 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(60px, 90px) scale(1.1) rotate(-280deg); }
}
@keyframes fly-p12 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2) rotate(0deg); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(25px, 115px) scale(1) rotate(190deg); }
}
@keyframes fly-p13 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2); }
60% { opacity: 1; }
100% { opacity: 0; transform: translate(-125px, 0px) scale(1.4) rotate(420deg); }
}
@keyframes fly-p14 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2); }
60% { opacity: 1; }
100% { opacity: 0; transform: translate(130px, 10px) scale(1.2) rotate(-400deg); }
}
@keyframes fly-p15 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2); }
60% { opacity: 1; }
100% { opacity: 0; transform: translate(0px, -135px) scale(1.4) rotate(360deg); }
}
@keyframes fly-p16 {
0% { opacity: 1; transform: translate(0, 0) scale(0.2); }
60% { opacity: 1; }
100% { opacity: 0; transform: translate(0px, 125px) scale(1.2) rotate(-360deg); }
}
/* ============================================= */
/* MINI FLOATING HEARTS (RISING WITH SWAY) */
/* ============================================= */
#like-toggle:checked + .like-label .mh1 {
animation: floatMiniHeart1 1.2s cubic-bezier(0.12, 0.75, 0.35, 1) forwards;
}
#like-toggle:checked + .like-label .mh2 {
animation: floatMiniHeart2 1.35s 0.05s cubic-bezier(0.12, 0.75, 0.35, 1) forwards;
}
#like-toggle:checked + .like-label .mh3 {
animation: floatMiniHeart3 1.15s 0.08s cubic-bezier(0.12, 0.75, 0.35, 1) forwards;
}
#like-toggle:checked + .like-label .mh4 {
animation: floatMiniHeart4 1.4s 0.12s cubic-bezier(0.12, 0.75, 0.35, 1) forwards;
}
@keyframes floatMiniHeart1 {
0% {
opacity: 0;
transform: translate(0, 0) scale(0.3) rotate(0deg);
}
20% {
opacity: 1;
}
50% {
transform: translate(-30px, -60px) scale(1.2) rotate(-18deg);
}
100% {
opacity: 0;
transform: translate(-45px, -140px) scale(0.8) rotate(-35deg);
}
}
@keyframes floatMiniHeart2 {
0% {
opacity: 0;
transform: translate(0, 0) scale(0.3) rotate(0deg);
}
20% {
opacity: 1;
}
50% {
transform: translate(32px, -70px) scale(1.3) rotate(16deg);
}
100% {
opacity: 0;
transform: translate(50px, -155px) scale(0.7) rotate(30deg);
}
}
@keyframes floatMiniHeart3 {
0% {
opacity: 0;
transform: translate(0, 0) scale(0.3) rotate(0deg);
}
20% {
opacity: 1;
}
50% {
transform: translate(-10px, -80px) scale(1) rotate(-10deg);
}
100% {
opacity: 0;
transform: translate(-18px, -170px) scale(0.6) rotate(15deg);
}
}
@keyframes floatMiniHeart4 {
0% {
opacity: 0;
transform: translate(0, 0) scale(0.3) rotate(0deg);
}
20% {
opacity: 1;
}
50% {
transform: translate(15px, -55px) scale(1.1) rotate(12deg);
}
100% {
opacity: 0;
transform: translate(25px, -135px) scale(0.7) rotate(-22deg);
}
}
/* Instructions & Footnote */
.hint {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.04);
border: 1px dashed rgba(255, 255, 255, 0.15);
padding: 8px 18px;
border-radius: 100px;
}
.hint svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* Subtle Idle Pulse on Heart before click */
@keyframes idleHeartbeat {
0%, 100% { transform: scale(1); }
14% { transform: scale(1.08); }
28% { transform: scale(1); }
42% { transform: scale(1.05); }
70% { transform: scale(1); }
}
#like-toggle:not(:checked) + .like-label .heart-icon {
animation: idleHeartbeat 2.8s ease-in-out infinite;
}
</style>
</head>
<body>
<div class="ambient-glow"></div>
<div class="ambient-glow-2"></div>
<main class="card">
<header class="card-header">
<span class="badge">100% Pure CSS • No JS</span>
<h1 class="title">Insane Like Experience</h1>
<p class="subtitle">Click the heart button to unleash the fireworks</p>
</header>
<div class="btn-wrap">
<!-- Pure CSS Checkbox state mechanism -->
<input type="checkbox" id="like-toggle" aria-label="Toggle Like">
<label for="like-toggle" class="like-label">
<!-- Core Flash Light Burst -->
<span class="flare"></span>
<!-- Shockwave Expansion Rings -->
<span class="ring ring-main"></span>
<span class="ring ring-secondary"></span>
<!-- Radial Spike Light Rays -->
<div class="spark-burst">
<span class="ray"></span>
<span class="ray"></span>
<span class="ray"></span>
<span class="ray"></span>
<span class="ray"></span>
<span class="ray"></span>
<span class="ray"></span>
<span class="ray"></span>
</div>
<!-- Confetti Particles Layer -->
<div class="confetti-layer">
<span class="p p1 dot-1"></span>
<span class="p p2 star-1"></span>
<span class="p p3 ribbon-1"></span>
<span class="p p4 dot-3"></span>
<span class="p p5 ribbon-2"></span>
<span class="p p6 star-2"></span>
<span class="p p7 dot-2"></span>
<span class="p p8 ribbon-3"></span>
<span class="p p9 dot-5"></span>
<span class="p p10 star-1"></span>
<span class="p p11 dot-4"></span>
<span class="p p12 ribbon-1"></span>
<span class="p p13 dot-6"></span>
<span class="p p14 star-2"></span>
<span class="p p15 dot-1"></span>
<span class="p p16 ribbon-2"></span>
</div>
<!-- Flying Floating Mini Hearts -->
<svg class="mini-heart mh1" viewBox="0 0 24 24"><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>
<svg class="mini-heart mh2" viewBox="0 0 24 24"><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>
<svg class="mini-heart mh3" viewBox="0 0 24 24"><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>
<svg class="mini-heart mh4" viewBox="0 0 24 24"><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>
<!-- Floating +1 Counter Popup -->
<span class="plus-one">+1</span>
<!-- Main Heart SVG Stage -->
<div class="heart-stage">
<div class="heart-icon">
<svg viewBox="0 0 24 24">
<defs>
<linearGradient id="heartGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff2a6d" />
<stop offset="50%" stop-color="#ff6200" />
<stop offset="100%" stop-color="#ff007b" />
</linearGradient>
</defs>
<!-- Static Outline Path -->
<path class="heart-outline" 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"/>
<!-- Vibrant Filled Heart Path -->
<path class="heart-fill" 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>
</div>
<!-- Button Labels & Dynamic Number -->
<div class="label-content">
<span class="action-text">Like</span>
<div class="counter-box">
<div class="counter-slider">
<span class="counter-item">14,289</span>
<span class="counter-item">14,290</span>
</div>
</div>
</div>
</label>
</div>
<footer class="hint">
<svg viewBox="0 0 24 24"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
<span>Toggle anytime to experience the burst again</span>
</footer>
</main>
</body>
</html>Reasoning trace (570 tokens)
**Crafting CSS Animation** I'm exploring how to achieve a dynamic "like" button using only CSS. The core idea is to leverage the `:checked` pseudo-class on a hidden checkbox, controlled by a visible label, to trigger elaborate animations. I'm currently experimenting with different keyframe sequences for a truly explosive and elastic visual feedback on click. **Designing an Animated Like Button** I'm deep into refining the visual flair for this CSS-only like button. My current focus is on the intricate particle and confetti burst, aiming for a dynamic, physics-inspired flutter for the mini-hearts. I'm also perfecting the ring shockwave and the haptic squish/bounce effect for immediate tactile feedback, all while ensuring it's beautifully styled with a 3D glassmorphic aesthetic.