Exploding like buttonOne-line

Gemini 3.1 Flash Lite

by GoogleReasoningClean

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 21.6 s
Cost: $0.011
Output tokens: 7,321
Spent thinking: 5,815 tokens
Speed: 357.5 tok/s
Console errors: 0

First token after: 1.2 s
First visible text after: 18.3 s
Prompt tokens: 362
Code size: 4.3 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"high"}
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 · 152 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Only Like Button</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: radial-gradient(circle, #1a1a2e, #16213e);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            color: #fff;
        }

        .container {
            text-align: center;
        }

        .hint {
            margin-top: 20px;
            font-size: 1.2rem;
            color: #e94560;
            text-transform: uppercase;
            letter-spacing: 2px;
            opacity: 0.8;
            pointer-events: none;
        }

        #like-btn {
            display: none;
        }

        .like-label {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 120px;
            height: 120px;
            background: #ffffff;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            animation: pulse 2s infinite ease-in-out;
        }

        .like-label:hover {
            transform: scale(1.1);
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .heart-svg {
            width: 60px;
            height: 60px;
            fill: #ccc;
            transition: fill 0.3s, transform 0.3s;
        }

        /* Explosion particles */
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 10px;
            background: #e94560;
            border-radius: 50%;
            opacity: 0;
            pointer-events: none;
        }

        /* Checkbox interactions */
        #like-btn:checked + .like-label {
            animation: none;
            box-shadow: 0 0 20px rgba(233, 69, 96, 0.5);
        }

        #like-btn:checked + .like-label .heart-svg {
            fill: #e94560;
            animation: bounce 0.4s ease-out;
        }

        #like-btn:checked + .like-label .particle {
            animation: explode 0.6s ease-out forwards;
        }

        @keyframes bounce {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }

        @keyframes explode {
            0% { transform: translate(0, 0) scale(1); opacity: 1; }
            100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
        }

        /* Assign directions to particles */
        .p1 { --tx: 60px; --ty: -60px; }
        .p2 { --tx: 0px; --ty: -80px; }
        .p3 { --tx: -60px; --ty: -60px; }
        .p4 { --tx: -80px; --ty: 0px; }
        .p5 { --tx: -60px; --ty: 60px; }
        .p6 { --tx: 0px; --ty: 80px; }
        .p7 { --tx: 60px; --ty: 60px; }
        .p8 { --tx: 80px; --ty: 0px; }
    </style>
</head>
<body>

    <div class="container">
        <input type="checkbox" id="like-btn">
        <label for="like-btn" class="like-label">
            <svg class="heart-svg" viewBox="0 0 32 29.6">
                <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
                c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
            </svg>
            <div class="particles">
                <span class="particle p1"></span>
                <span class="particle p2"></span>
                <span class="particle p3"></span>
                <span class="particle p4"></span>
                <span class="particle p5"></span>
                <span class="particle p6"></span>
                <span class="particle p7"></span>
                <span class="particle p8"></span>
            </div>
        </label>
        <div class="hint">Click the heart</div>
    </div>

</body>
</html>

Reasoning trace (5,815 tokens)

**Styling the Like Button**

I'm exploring CSS-only solutions for an animated "like" button. The challenge is incorporating a dynamic, visually engaging animation entirely within CSS, ensuring it's mobile-friendly and self-contained.

**Animating a Like Button**

I'm diving deeper into pure CSS methods for creating an animated "like" button. My current focus is on leveraging checkbox states and intricate CSS animations to achieve a visually striking, JavaScript-free effect. I'm experimenting with dynamic color shifts and scaling to make it truly stand out.

**Enhancing Button Animation**

I'm refining the "crazy" animation concept. My current thoughts focus on making the button expand and shake, with dynamic sparkles emanating outwards upon interaction. I'm also experimenting with the heart element itself flipping or expanding for a more engaging visual.

**Adding Animated Particles**

I'm now focusing on implementing animated particles upon click. I plan to use multiple `span` elements within the button's label, pre-positioned and animated to fly outwards when the checkbox state changes, all managed purely through CSS variables and selectors.

**Refining Particle Animation**

I'm thinking about how to manage the animation loop. The core challenge is to ensure the "explosion" effect plays only once upon checking, while the button remains red and "liked." I'm considering using CSS keyframes triggered by the checked state, ensuring a clean restart if unchecked and re-checked.

**Developing Particle Animations**

I'm focusing on creating a multitude of particles that truly convey a "crazy" effect. My latest iteration involves using multiple `span` elements, each strategically animated with `rotate` and `translate` to fly outwards, aiming for a dynamic and visually dense explosion.

**Shaking the Button**

I'm considering adding a shake animation when the button is clicked, beyond the particle explosion. My current focus is on how to trigger this secondary animation purely through CSS, ensuring it complements the existing particle effect and adheres to the "no JavaScript" rule.

**Observing Button Behavior**

I'm reflecting on the core functionality. While initially thinking about "self-playing demo modes," I've realized this is a button, not a game. My focus now is ensuring immediate visual feedback, like a subtle pulse on load, making it appear interactive from the start.

**Simulating a Click**

I'm rethinking the "self-playing demo" aspect. Since JavaScript is out, I'm exploring CSS animations that visually *mimic* an initial click interaction, rather than actually triggering it, to meet the demo requirement.

**Simulating Interaction**

I'm now focusing on visually simulating an initial interaction. My current thinking involves a subtle pulse animation upon loading, making the button appear ready and inviting, rather than a full "self-playing" demo, which feels more appropriate for a button component.

**Positioning Particles Precisely**

I'm refining the particle placement. My current focus is on ensuring the particle `span` elements are absolutely positioned *within* the label, allowing them to erupt from around the heart icon. I'm also considering SVG for the heart itself for easier styling.

**Finalizing Particle Animation**

I'm settling on the particle animation logic. The keyframes will ensure they explode outwards only once when checked, and I've confirmed that toggling the `:checked` state will reliably restart the animation, providing the desired feedback loop.

**Managing Particle Visibility**

I'm confirming the particle animation logic. They'll only appear and animate when checked, then vanish cleanly when unchecked, thanks to dynamically toggling their `display` property via CSS selectors tied to the checkbox's state.

**Styling the Final Product**

I'm focused on the final aesthetic touches. This involves a dark gradient background, a glowing red heart, and vibrantly multi-colored particles to create a polished, engaging look, ensuring no horizontal scrollbars appear.

**Adding Particle Structure**

I'm integrating the necessary HTML structure for the particles within the label, ensuring they can be absolutely positioned relative to it for proper eruption. My focus remains on a pure CSS solution.

**Exploding Particles**

I'm implementing the explosion effect, ensuring particles fly in all directions. I'm using eight `span` elements, `nth-child` for rotation, and inline styles to define individual translation vectors for a dynamic outward burst.

**Adding Particle Animation Logic**

I'm focusing on the finer points of particle animation. My current thoughts are on managing their visibility and ensuring the animation only triggers on the checked state, cleaning up nicely when unchecked. I'm also exploring how to initiate the explosion precisely.

**Concealing Particles Initially**

I'm ensuring the particles are hidden until the like button is activated. My current focus is on using `opacity: 0` to keep them concealed, then transitioning them to visible and animated only when the `:checked` state is applied via CSS selectors.

**Concealing Particles Initially**

I'm making sure the particles are hidden until the button is liked. My current focus is on using `opacity: 0` to keep them concealed, then transitioning them to visible and animated only when the `:checked` state is applied.

**Avoiding Demo Mode**

I'm deciding against a self-playing demo mode. My conclusion is this isn't a game, so those specific constraints shouldn't apply. I'll focus on a visually stunning, interactive button instead.