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
- 45.9 s
- Cost
- $0.028
- Output tokens
- 7,335
- Spent thinking
- 0 tokens
- Speed
- 164.3 tok/s
- Console errors
- 0
- First token after
- 1.2 s
- First visible text after
- 1.2 s
- Prompt tokens
- 362
- Code size
- 17.4 KB
- Finish reason
- stop
- Served by
- Model id
google/gemini-3.8-flash- Reasoning sent
{"effort":"low"}- 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 · 575 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crazy Pure CSS Like Button</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--bg-color: #0b0c16;
--heart-inactive: #4a4e69;
--heart-active-1: #ff2a6d;
--heart-active-2: #9b5de5;
--gold: #f15bb5;
--cyan: #00f5d4;
--yellow: #fee440;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: radial-gradient(circle at 50% 50%, #1a1c2e 0%, var(--bg-color) 100%);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
overflow: hidden;
user-select: none;
-webkit-user-select: none;
}
.info-text {
position: absolute;
top: 15%;
text-align: center;
color: rgba(255, 255, 255, 0.7);
font-size: 1.1rem;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 300;
pointer-events: none;
animation: pulseText 2s ease-in-out infinite alternate;
}
.info-text span {
display: block;
font-size: 0.8rem;
margin-top: 6px;
color: var(--cyan);
opacity: 0.8;
letter-spacing: 1px;
}
@keyframes pulseText {
0% { opacity: 0.5; transform: translateY(0); }
100% { opacity: 1; transform: translateY(-3px); }
}
/* Container for positioning all interactive elements */
.like-container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 220px;
height: 220px;
}
/* Hidden Checkbox controlling all states */
.like-checkbox {
position: absolute;
width: 130px;
height: 130px;
opacity: 0;
cursor: pointer;
z-index: 100;
}
/* Background Neon Aura */
.aura-ring {
position: absolute;
width: 140px;
height: 140px;
border-radius: 50%;
background: conic-gradient(from 0deg, var(--heart-active-1), var(--yellow), var(--cyan), var(--heart-active-2), var(--heart-active-1));
filter: blur(25px);
opacity: 0.15;
transform: scale(0.8);
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
pointer-events: none;
z-index: 1;
}
/* Shockwave circle */
.shockwave {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
border: 4px solid var(--heart-active-1);
opacity: 0;
transform: scale(0.2);
pointer-events: none;
z-index: 2;
}
/* Secondary Rainbow Ripple */
.shockwave-2 {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px dashed var(--cyan);
opacity: 0;
transform: scale(0.1);
pointer-events: none;
z-index: 2;
}
/* Main Heart Container */
.heart-wrapper {
position: relative;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 10;
transform-origin: center center;
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.heart-wrapper:hover {
transform: scale(1.08);
}
.like-checkbox:active ~ .heart-wrapper {
transform: scale(0.8);
}
.heart-svg {
width: 100%;
height: 100%;
overflow: visible;
}
.heart-path {
fill: var(--heart-inactive);
stroke: rgba(255, 255, 255, 0.2);
stroke-width: 2;
transition: fill 0.3s ease, stroke 0.3s ease, filter 0.3s ease;
filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}
/* Radial Particle Elements (16 particles created with pure CSS pseudo & child shapes) */
.particles-layer {
position: absolute;
width: 0;
height: 0;
pointer-events: none;
z-index: 5;
}
.particle-spoke {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
transform-origin: center;
}
.dot, .spark, .star {
position: absolute;
opacity: 0;
transform: translate(-50%, -50%) scale(0);
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.spark {
width: 4px;
height: 24px;
border-radius: 3px;
}
.star {
width: 14px;
height: 14px;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
/* Floating mini hearts */
.floaters {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 20;
}
.floating-heart {
position: absolute;
width: 22px;
height: 22px;
fill: var(--heart-active-1);
opacity: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
}
/* Counter Badge */
.like-counter {
position: absolute;
bottom: -45px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
padding: 6px 18px;
border-radius: 20px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.7);
font-size: 0.95rem;
font-weight: 600;
transition: all 0.4s ease;
letter-spacing: 0.5px;
z-index: 10;
}
.like-counter .count-active,
.like-counter .count-inactive {
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.like-counter .count-active {
display: none;
color: #ff2a6d;
}
/* ========================================================
CRAZY ANIMATION TRIGGERS ON CHECKED
======================================================== */
.like-checkbox:checked ~ .aura-ring {
opacity: 0.8;
transform: scale(2.2);
animation: rotateAura 6s linear infinite;
}
@keyframes rotateAura {
0% { transform: scale(2.2) rotate(0deg); }
100% { transform: scale(2.2) rotate(360deg); }
}
.like-checkbox:checked ~ .shockwave {
animation: shockwaveExplode 0.8s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
@keyframes shockwaveExplode {
0% {
opacity: 1;
transform: scale(0.2);
border-width: 14px;
border-color: #ff2a6d;
}
50% {
border-color: #fee440;
}
100% {
opacity: 0;
transform: scale(3.2);
border-width: 0px;
border-color: #00f5d4;
}
}
.like-checkbox:checked ~ .shockwave-2 {
animation: shockwaveExplode2 0.9s cubic-bezier(0.05, 0.7, 0.2, 1) 0.1s forwards;
}
@keyframes shockwaveExplode2 {
0% {
opacity: 1;
transform: scale(0.1) rotate(0deg);
border-width: 8px;
}
100% {
opacity: 0;
transform: scale(4) rotate(90deg);
border-width: 1px;
}
}
/* Crazy Heart Animation: Squash, Spin, Explode, and Settle with Neon Fill */
.like-checkbox:checked ~ .heart-wrapper {
animation: crazyHeartBeat 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.like-checkbox:checked ~ .heart-wrapper .heart-path {
fill: url(#heartGradient);
stroke: #fff;
stroke-width: 2;
filter: drop-shadow(0 0 20px rgba(255, 42, 109, 0.9)) drop-shadow(0 0 45px rgba(241, 91, 181, 0.7));
}
@keyframes crazyHeartBeat {
0% {
transform: scale(1);
}
15% {
transform: scale(0.4) rotate(-20deg);
}
30% {
transform: scale(1.6) rotate(15deg);
}
45% {
transform: scale(0.9) rotate(-10deg) skewX(10deg);
}
60% {
transform: scale(1.25) rotate(5deg) skewX(-5deg);
}
75% {
transform: scale(0.95) rotate(-2deg);
}
85% {
transform: scale(1.1) rotate(1deg);
}
100% {
transform: scale(1) rotate(0deg);
}
}
/* Particle Spoke Rotations and Explosions */
/* 12 radial spokes */
.spoke-1 { transform: rotate(0deg); }
.spoke-2 { transform: rotate(30deg); }
.spoke-3 { transform: rotate(60deg); }
.spoke-4 { transform: rotate(90deg); }
.spoke-5 { transform: rotate(120deg); }
.spoke-6 { transform: rotate(150deg); }
.spoke-7 { transform: rotate(180deg); }
.spoke-8 { transform: rotate(210deg); }
.spoke-9 { transform: rotate(240deg); }
.spoke-10 { transform: rotate(270deg); }
.spoke-11 { transform: rotate(300deg); }
.spoke-12 { transform: rotate(330deg); }
/* Alternate particle colors */
.spoke-1 .dot, .spoke-5 .dot, .spoke-9 .dot { background: var(--heart-active-1); box-shadow: 0 0 12px var(--heart-active-1); }
.spoke-2 .spark, .spoke-6 .spark, .spoke-10 .spark { background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.spoke-3 .dot, .spoke-7 .dot, .spoke-11 .dot { background: var(--yellow); box-shadow: 0 0 12px var(--yellow); }
.spoke-4 .star, .spoke-8 .star, .spoke-12 .star { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.like-checkbox:checked ~ .particles-layer .particle-spoke .dot {
animation: explodeDot 0.85s cubic-bezier(0.12, 0.8, 0.32, 1) forwards;
}
.like-checkbox:checked ~ .particles-layer .particle-spoke .spark {
animation: explodeSpark 0.8s cubic-bezier(0.12, 0.8, 0.32, 1) 0.05s forwards;
}
.like-checkbox:checked ~ .particles-layer .particle-spoke .star {
animation: explodeStar 0.9s cubic-bezier(0.12, 0.8, 0.32, 1) 0.03s forwards;
}
@keyframes explodeDot {
0% {
opacity: 0;
transform: translate(0, 0) scale(0.2);
}
20% {
opacity: 1;
}
70% {
opacity: 1;
transform: translate(0, -110px) scale(1.3);
}
100% {
opacity: 0;
transform: translate(0, -135px) scale(0);
}
}
@keyframes explodeSpark {
0% {
opacity: 0;
transform: translate(0, 0) scaleY(0.2);
}
25% {
opacity: 1;
}
65% {
opacity: 1;
transform: translate(0, -130px) scaleY(1.5) rotate(45deg);
}
100% {
opacity: 0;
transform: translate(0, -160px) scaleY(0) rotate(90deg);
}
}
@keyframes explodeStar {
0% {
opacity: 0;
transform: translate(0, 0) scale(0) rotate(0deg);
}
20% {
opacity: 1;
transform: translate(0, -30px) scale(1.2) rotate(45deg);
}
70% {
opacity: 1;
transform: translate(0, -120px) scale(1) rotate(180deg);
}
100% {
opacity: 0;
transform: translate(0, -145px) scale(0) rotate(360deg);
}
}
/* Floating Heart Explosions in all directions */
.like-checkbox:checked ~ .floaters .fh-1 { animation: floatHeart1 1.2s cubic-bezier(0.2, 0.8, 0.4, 1) forwards; }
.like-checkbox:checked ~ .floaters .fh-2 { animation: floatHeart2 1.3s cubic-bezier(0.2, 0.8, 0.4, 1) 0.05s forwards; }
.like-checkbox:checked ~ .floaters .fh-3 { animation: floatHeart3 1.1s cubic-bezier(0.2, 0.8, 0.4, 1) 0.08s forwards; }
.like-checkbox:checked ~ .floaters .fh-4 { animation: floatHeart4 1.4s cubic-bezier(0.2, 0.8, 0.4, 1) 0.02s forwards; }
.like-checkbox:checked ~ .floaters .fh-5 { animation: floatHeart5 1.25s cubic-bezier(0.2, 0.8, 0.4, 1) 0.06s forwards; }
@keyframes floatHeart1 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
20% { opacity: 1; }
100% { opacity: 0; transform: translate(-120px, -140px) scale(1.4) rotate(-35deg); filter: drop-shadow(0 0 10px #ff2a6d); }
}
@keyframes floatHeart2 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
20% { opacity: 1; }
100% { opacity: 0; transform: translate(110px, -150px) scale(1.3) rotate(40deg); filter: drop-shadow(0 0 10px #f15bb5); }
}
@keyframes floatHeart3 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
20% { opacity: 1; }
100% { opacity: 0; transform: translate(-140px, 40px) scale(1.1) rotate(-60deg); filter: drop-shadow(0 0 10px #9b5de5); }
}
@keyframes floatHeart4 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
20% { opacity: 1; }
100% { opacity: 0; transform: translate(130px, 30px) scale(1.2) rotate(45deg); filter: drop-shadow(0 0 10px #ff2a6d); }
}
@keyframes floatHeart5 {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
20% { opacity: 1; }
100% { opacity: 0; transform: translate(0px, -170px) scale(1.6) rotate(10deg); filter: drop-shadow(0 0 10px #fee440); }
}
/* Counter state swap & bounce */
.like-checkbox:checked ~ .like-counter {
background: rgba(255, 42, 109, 0.15);
border-color: rgba(255, 42, 109, 0.4);
box-shadow: 0 0 25px rgba(255, 42, 109, 0.3);
transform: translateY(-2px);
}
.like-checkbox:checked ~ .like-counter .count-inactive {
display: none;
}
.like-checkbox:checked ~ .like-counter .count-active {
display: inline-block;
animation: countPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes countPop {
0% { transform: scale(0.5); opacity: 0; }
60% { transform: scale(1.4); }
100% { transform: scale(1); opacity: 1; }
}
/* Unchecked reversal animations gracefully decay */
.like-checkbox:not(:checked) ~ .heart-wrapper {
animation: heartReverse 0.4s ease forwards;
}
@keyframes heartReverse {
0% { transform: scale(1.1); }
50% { transform: scale(0.9); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="info-text">
Pure CSS Action
<span>Click to Trigger Fireworks</span>
</div>
<div class="like-container">
<!-- SVG Defs for Gradients and Shared Heart Shape -->
<svg width="0" height="0" style="position: absolute;">
<defs>
<linearGradient id="heartGradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ff2a6d" />
<stop offset="50%" stop-color="#f15bb5" />
<stop offset="100%" stop-color="#9b5de5" />
</linearGradient>
</defs>
</svg>
<!-- Checkbox controlling everything -->
<input type="checkbox" id="like" class="like-checkbox" title="Like Button">
<!-- Atmospheric Glowing Ring -->
<div class="aura-ring"></div>
<!-- Expanding Kinetic Shockwaves -->
<div class="shockwave"></div>
<div class="shockwave-2"></div>
<!-- Radial Explosion Spokes (Particles) -->
<div class="particles-layer">
<div class="particle-spoke spoke-1"><div class="dot"></div></div>
<div class="particle-spoke spoke-2"><div class="spark"></div></div>
<div class="particle-spoke spoke-3"><div class="dot"></div></div>
<div class="particle-spoke spoke-4"><div class="star"></div></div>
<div class="particle-spoke spoke-5"><div class="dot"></div></div>
<div class="particle-spoke spoke-6"><div class="spark"></div></div>
<div class="particle-spoke spoke-7"><div class="dot"></div></div>
<div class="particle-spoke spoke-8"><div class="star"></div></div>
<div class="particle-spoke spoke-9"><div class="dot"></div></div>
<div class="particle-spoke spoke-10"><div class="spark"></div></div>
<div class="particle-spoke spoke-11"><div class="dot"></div></div>
<div class="particle-spoke spoke-12"><div class="star"></div></div>
</div>
<!-- Mini Flying Hearts -->
<div class="floaters">
<svg class="floating-heart fh-1" 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="floating-heart fh-2" 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="floating-heart fh-3" 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="floating-heart fh-4" 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="floating-heart fh-5" 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>
</div>
<!-- Center Interactive Heart Button -->
<label for="like" class="heart-wrapper">
<svg class="heart-svg" viewBox="0 0 24 24">
<path class="heart-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>
</label>
<!-- Reactive Counter -->
<div class="like-counter">
<span class="count-inactive">999 Likes</span>
<span class="count-active">1,000 Likes!</span>
</div>
</div>
</body>
</html>