Exploding like buttonOne-line

Nemotron 3.5 Super VL (free)

by NVIDIAReasoningClean

Open in new window

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

How it went

Total time: 21.4 s
Cost: $0
Output tokens: 3,653
Spent thinking: 0 tokens
Speed: 174.2 tok/s
Console errors: 0

First token after: 456 ms
First visible text after: 456 ms
Prompt tokens: 375
Code size: 10.7 KB
Finish reason: stop
Served by: Nvidia
Model id: nvidia/nemotron-3.5-super-vl:free
Reasoning sent: {"effort":"none"}
Max output: 32,000 tokens
Generated: Nov 9, 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 · 385 lines

Download

<!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>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        overflow-x: hidden;
    }

    /* Background decorative elements */
    body::before {
        content: '';
        position: fixed;
        top: -50%;
        left: -50%;
        width: 200vw;
        height: 200vh;
        background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

    h1 {
        color: white;
        font-size: 2.5rem;
        margin-bottom: 2rem;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        position: relative;
        z-index: 1;
        animation: titleFloat 3s ease-in-out infinite;
    }

    @keyframes titleFloat {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    /* The like button container */
    .like-wrapper {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    p {
        color: white;
        opacity: 0.9;
        font-size: 1.1rem;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    }

    /* The checkbox hack - invisible */
    input[type="checkbox"] {
        display: none;
    }

    /* The like button */
    label.like-btn {
        position: relative;
        width: 120px;
        height: 120px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease;
    }

    label.like-btn:active {
        transform: scale(0.9);
    }

    /* The heart shape (made with pure CSS) */
    .heart {
        position: relative;
        width: 60px;
        height: 60px;
        background: #ff4757;
        transform: rotate(-45deg);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
        border-radius: 2px;
    }

    .heart::before,
    .heart::after {
        content: '';
        position: absolute;
        width: 60px;
        height: 60px;
        background: #ff4757;
        border-radius: 50%;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .heart::before {
        top: -30px;
        left: 0;
    }

    .heart::after {
        left: -30px;
        top: 0;
    }

    /* Checked state - heart turns red and scales up slightly */
    input[type="checkbox"]:checked + .like-btn .heart {
        background: #ff6b6b;
        transform: rotate(-45deg) scale(1.1);
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
    }

    input[type="checkbox"]:checked + .like-btn .heart::before,
    input[type="checkbox"]:checked + .like-btn .heart::after {
        background: #ff6b6b;
    }

    /* The "crazy" animation - triggered on checked state */
    input[type="checkbox"]:checked + .like-btn .heart {
        animation: crazyLike 1.5s ease-in-out infinite;
    }

    @keyframes crazyLike {
        0% {
            transform: rotate(-45deg) scale(1);
            box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
        }
        10% {
            transform: rotate(-45deg) scale(1.3) rotate(10deg);
            box-shadow: 0 0 20px 10px rgba(255, 107, 107, 0.6);
        }
        20% {
            transform: rotate(-45deg) scale(0.8) rotate(-15deg);
            box-shadow: 0 0 30px 20px rgba(255, 255, 255, 0.4);
        }
        30% {
            transform: rotate(-45deg) scale(1.4) rotate(20deg);
            box-shadow: 0 0 40px 30px rgba(255, 255, 255, 0.6);
        }
        40% {
            transform: rotate(-45deg) scale(0.7) rotate(-25deg);
        }
        50% {
            transform: rotate(-45deg) scale(1.5) rotate(30deg);
            box-shadow: 0 0 50px 40px rgba(255, 255, 255, 0.8);
        }
        60% {
            transform: rotate(-45deg) scale(0.6) rotate(-35deg);
        }
        70% {
            transform: rotate(-45deg) scale(1.3) rotate(25deg);
            box-shadow: 0 0 60px 50px rgba(255, 255, 255, 1);
        }
        80% {
            transform: rotate(-45deg) scale(0.9) rotate(-15deg);
        }
        90% {
            transform: rotate(-45deg) scale(1.1) rotate(5deg);
        }
        100% {
            transform: rotate(-45deg) scale(1) rotate(0deg);
            box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.7);
        }
    }

    /* Particle explosion effect using pseudo-elements on the wrapper */
    input[type="checkbox"]:checked + .like-btn + .particles::before,
    input[type="checkbox"]:checked + .like-btn + .particles::after,
    input[type="checkbox"]:checked + .like-btn + .particles .particle {
        animation: explode 0.8s ease-out forwards;
    }

    .particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .particle {
        position: absolute;
        width: 8px;
        height: 8px;
        background: #ffd700;
        border-radius: 50%;
        opacity: 0;
    }

    /* Generate particles at different positions with different delays */
    .particle:nth-child(1) { left: 30px; top: 20px; animation-delay: 0s; }
    .particle:nth-child(2) { left: 50px; top: 10px; animation-delay: 0.05s; }
    .particle:nth-child(3) { left: 70px; top: 25px; animation-delay: 0.1s; }
    .particle:nth-child(4) { left: 10px; top: 50px; animation-delay: 0.02s; }
    .particle:nth-child(5) { left: 90px; top: 60px; animation-delay: 0.08s; }
    .particle:nth-child(6) { left: 40px; top: 80px; animation-delay: 0.12s; }
    .particle:nth-child(7) { left: 60px; top: 90px; animation-delay: 0.06s; }
    .particle:nth-child(8) { left: 20px; top: 10px; animation-delay: 0.15s; }
    .particle:nth-child(9) { left: 80px; top: 30px; animation-delay: 0.03s; }
    .particle:nth-child(10) { left: 50px; top: 50px; animation-delay: 0.11s; }

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

    /* Assign explosion trajectories */
    .particle:nth-child(1) { --tx: -40px; --ty: -60px; }
    .particle:nth-child(2) { --tx: -20px; --ty: -80px; }
    .particle:nth-child(3) { --tx: 40px; --ty: -70px; }
    .particle:nth-child(4) { --tx: -60px; --ty: -40px; }
    .particle:nth-child(5) { --tx: 60px; --ty: -50px; }
    .particle:nth-child(6) { --tx: -30px; --ty: 60px; }
    .particle:nth-child(7) { --tx: 30px; --ty: 70px; }
    .particle:nth-child(8) { --tx: -50px; --ty: -50px; }
    .particle:nth-child(9) { --tx: 50px; --ty: -60px; }
    .particle:nth-child(10) { --tx: 0; --ty: -80px; }

    /* Confetti pieces */
    .confetti {
        position: absolute;
        width: 6px;
        height: 12px;
        background: #ff6b6b;
        opacity: 0;
    }

    input[type="checkbox"]:checked + .like-btn + .particles .confetti {
        animation: confettiFall 1.5s ease-out forwards;
    }

    .confetti:nth-child(11) { left: 25px; top: 15px; background: #ff6b6b; animation-delay: 0s; --ctx: -30px; --cty: 100px; }
    .confetti:nth-child(12) { left: 45px; top: 5px; background: #4ecdc4; animation-delay: 0.05s; --ctx: -10px; --cty: 120px; }
    .confetti:nth-child(13) { left: 65px; top: 20px; background: #ffd700; animation-delay: 0.1s; --ctx: 40px; --cty: 110px; }
    .confetti:nth-child(14) { left: 15px; top: 45px; background: #ff6b6b; animation-delay: 0.02s; --ctx: -50px; --cty: 90px; }
    .confetti:nth-child(15) { left: 85px; top: 55px; background: #4ecdc4; animation-delay: 0.08s; --ctx: 50px; --cty: 100px; }

    @keyframes confettiFall {
        0% {
            transform: translate(0, 0) rotate(0deg) scale(1);
            opacity: 1;
        }
        100% {
            transform: translate(var(--ctx), var(--cty)) rotate(720deg) scale(0);
            opacity: 0;
        }
    }

    /* Mobile responsiveness */
    @media (max-width: 480px) {
        h1 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
        }

        p {
            font-size: 1rem;
            padding: 0 20px;
            text-align: center;
        }

        .like-btn {
            width: 100px;
            height: 100px;
        }

        .heart {
            width: 50px;
            height: 50px;
        }

        .heart::before,
        .heart::after {
            width: 50px;
            height: 50px;
        }

        .heart::before {
            top: -25px;
        }

        .heart::after {
            left: -25px;
        }

        .particle {
            width: 6px;
            height: 6px;
        }
    }

    @media (max-width: 375px) {
        h1 {
            font-size: 1.4rem;
        }

        p {
            font-size: 0.9rem;
        }

        .like-btn {
            width: 90px;
            height: 90px;
        }

        .heart {
            width: 45px;
            height: 45px;
        }

        .heart::before,
        .heart::after {
            width: 45px;
            height: 45px;
        }

        .heart::before {
            top: -22.5px;
        }

        .heart::after {
            left: -22.5px;
        }
    }
</style>
</head>
<body>
    <div class="like-wrapper">
        <h1>Like Button</h1>
        <p>Click the heart to like!</p>
        
        <!-- Hidden checkbox for the CSS toggle -->
        <input type="checkbox" id="like-checkbox">
        
        <!-- The label acts as the button -->
        <label for="like-checkbox" class="like-btn" aria-pressed="false" role="button" tabindex="0">
            <div class="heart"></div>
        </label>
        
        <!-- Particle explosion container -->
        <div class="particles">
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
            <div class="confetti"></div>
        </div>
    </div>
</body>
</html>