Exploding like buttonOne-line

DeepSeek V4 Flash 0423

by DeepSeekreasoning defaultClean

Open in new window

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

How it went

Total time: 17.4 s
Cost: $0.0004
Output tokens: 2,020
Spent thinking: 0 tokens
Speed: 119.6 tok/s
Console errors: 0

First token after: 525 ms
First visible text after: 525 ms
Prompt tokens: 356
Code size: 7.3 KB
Finish reason: stop
Served by: DeepInfra
Model id: deepseek/deepseek-v4-flash
Reasoning sent: model default
Max output: 393,216 tokens
Generated: Nov 13, 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 · 224 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>crazy like button • pure CSS</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: linear-gradient(145deg, #1b1e2b 0%, #2d2f3f 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
            padding: 16px;
        }

        .card {
            background: rgba(22, 25, 35, 0.7);
            backdrop-filter: blur(4px);
            border-radius: 64px 64px 48px 48px;
            box-shadow: 0 30px 40px -15px rgba(0,0,0,0.6), inset 0 1px 3px rgba(255,255,255,0.08);
            padding: 32px 40px 40px 40px;
            transition: box-shadow 0.2s ease;
        }

        /* label wraps the checkbox – clickable area */
        .like-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        /* hide native checkbox, but keep it accessible + focusable */
        .like-button input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
            pointer-events: none;
        }

        .like-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 5.2rem;
            line-height: 1;
            filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
            transition: transform 0.15s cubic-bezier(0.34, 1.6, 0.64, 1);
            will-change: transform;
            /* crazy animation starts hidden, triggered by :checked */
        }

        /* baseline heart */
        .heart-symbol {
            display: block;
            transition: transform 0.2s ease, filter 0.2s ease;
        }

        /* ----- CRAZY ANIMATION when checked (liked) ----- */
        .like-button input:checked ~ .like-icon {
            animation: crazyLike 0.9s cubic-bezier(0.23, 1, 0.32, 1) forwards;
        }

        /* heart itself gets extra shake + color pop */
        .like-button input:checked ~ .like-icon .heart-symbol {
            animation: heartPop 0.9s ease-in-out forwards;
            filter: drop-shadow(0 0 12px #ff3366) drop-shadow(0 0 25px #ff6b8a);
        }

        /* label text */
        .like-label {
            margin-top: 12px;
            font-weight: 600;
            letter-spacing: 1.5px;
            font-size: 1rem;
            text-transform: uppercase;
            background: linear-gradient(135deg, #aaaec9, #d4d8f0);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            transition: all 0.2s;
            text-shadow: 0 2px 6px rgba(0,0,0,0.3);
        }

        .like-button input:checked ~ .like-label {
            background: linear-gradient(135deg, #ff5e7a, #ff8fa3);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            letter-spacing: 2px;
        }

        /* small micro interaction on hover */
        .like-button:hover .like-icon {
            transform: scale(1.05);
        }

        .like-button input:focus-visible + .like-icon {
            outline: 3px solid #ff8fa3;
            outline-offset: 12px;
            border-radius: 999px;
        }

        /* ----- KEYFRAMES: maximum chaos ----- */
        @keyframes crazyLike {
            0% {
                transform: scale(1) rotate(0deg) translateY(0);
            }
            10% {
                transform: scale(1.5) rotate(-12deg) translateX(-5px);
            }
            20% {
                transform: scale(0.8) rotate(10deg) translateX(8px) translateY(-10px);
            }
            30% {
                transform: scale(1.7) rotate(-18deg) translateX(-15px) translateY(5px);
            }
            40% {
                transform: scale(0.9) rotate(20deg) translateX(10px) translateY(-15px);
            }
            50% {
                transform: scale(1.8) rotate(-25deg) translateX(-20px) translateY(12px);
            }
            60% {
                transform: scale(0.7) rotate(15deg) translateX(18px) translateY(-8px);
            }
            70% {
                transform: scale(1.5) rotate(-10deg) translateX(-8px) translateY(15px);
            }
            80% {
                transform: scale(1.1) rotate(5deg) translateX(4px) translateY(-5px);
            }
            90% {
                transform: scale(1.3) rotate(-5deg) translateX(-3px) translateY(3px);
            }
            100% {
                transform: scale(1) rotate(0deg) translateX(0) translateY(0);
            }
        }

        @keyframes heartPop {
            0% {
                transform: scale(1) rotate(0deg);
                text-shadow: 0 0 0 #ff3366;
            }
            15% {
                transform: scale(1.7) rotate(20deg);
                text-shadow: 0 0 30px #ff1744, 0 0 60px #ff6b8a;
            }
            30% {
                transform: scale(0.8) rotate(-25deg);
                text-shadow: 0 0 50px #ff80ab, 0 0 90px #ff1744;
            }
            45% {
                transform: scale(2.0) rotate(30deg);
                text-shadow: 0 0 80px #ff2d55, 0 0 120px #ff80ab;
            }
            60% {
                transform: scale(0.7) rotate(-20deg);
                text-shadow: 0 0 40px #ff6b8a, 0 0 80px #ff1744;
            }
            75% {
                transform: scale(1.6) rotate(10deg);
                text-shadow: 0 0 60px #ff80ab, 0 0 100px #ff2d55;
            }
            90% {
                transform: scale(1.2) rotate(-5deg);
                text-shadow: 0 0 30px #ff6b8a, 0 0 60px #ff1744;
            }
            100% {
                transform: scale(1) rotate(0deg);
                text-shadow: 0 0 12px #ff3366, 0 0 25px #ff6b8a;
            }
        }

        /* extra spark: after animation ends, heart keeps a subtle glow */
        .like-button input:checked ~ .like-icon .heart-symbol {
            animation-fill-mode: forwards;
        }

        /* responsive */
        @media (max-width: 420px) {
            .card {
                padding: 24px 20px 28px 20px;
                border-radius: 48px;
            }
            .like-icon {
                font-size: 4.2rem;
            }
        }
    </style>
</head>
<body>
<div class="card">
    <label class="like-button" aria-label="Like button with crazy animation">
        <!-- checkbox controls pure CSS state -->
        <input type="checkbox" id="likeCheckbox">

        <!-- the big heart -->
        <span class="like-icon" aria-hidden="true">
            <span class="heart-symbol">❤️</span>
        </span>

        <!-- label text changes via CSS -->
        <span class="like-label">like</span>
    </label>
    <!-- small note: click again to un-like & re-crazy -->
    <p style="text-align:center; margin-top: 16px; font-size:0.7rem; color: #5d627a; letter-spacing:0.3px;">
        click heart • crazy animation
    </p>
</div>
</body>
</html>