Exploding like buttonOne-line

DeepSeek V4.1 Flash 1017

by DeepSeekReasoningClean

Open in new window

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

How it went

Total time: 13.1 s
Cost: $0.0011
Output tokens: 2,196
Spent thinking: 0 tokens
Speed: 172.6 tok/s
Console errors: 0

First token after: 420 ms
First visible text after: 420 ms
Prompt tokens: 357
Code size: 6.7 KB
Finish reason: stop
Served by: Wafer
Model id: deepseek/deepseek-v4.1-flash-1017
Reasoning sent: {"effort":"none"}
Max output: 64,000 tokens
Generated: Nov 10, 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 · 262 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crazy Like Button — Pure CSS</title>
<style>
  :root {
    --bg1: #0f0c29;
    --bg2: #302b63;
    --bg3: #24243e;
eeee  }
  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    height: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
  }

  body {
    background: radial-gradient(circle at 50% 40%, var(--bg2) 0%, var(--bg1) 55%, #05030f 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    color: #fff;
    position: relative;
  }

  /* Twinkling star background */
  body::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.8), transparent),
      radial-gradient(1.5px 1.5px at 80% 15%, rgba(255,255,255,.6), transparent),
      radial-gradient(1px 1px at 55% 70%, rgba(255,255,255,.7), transparent),
      radial-gradient(1.5px 1.5px at 12% 80%, rgba(255,255,255,.5), transparent),
      radial-gradient(1px 1px at 72% 55%, rgba(255,255,255,.8), transparent),
      radial-gradient(1.5px 1.5px at 90% 85%, rgba(255,255,255,.4), transparent),
      radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,.7), transparent),
      radial-gradient(1.5px 1.5px at 65% 90%, rgba(255,255,255,.6), transparent);
    animation: twinkle 4s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes twinkle {
    from { opacity: .4; }
    to   { opacity: 1; }
  }

  .stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.2rem;
    z-index: 2;
  }

  h1 {
    font-size: clamp(1.1rem, 3.2vw, 1.6rem);
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #ff9ecb;
    text-shadow: 0 0 18px rgba(255, 80, 160, .45);
    text-align: center;
    padding: 0 1rem;
  }

  /* ============================================================
     THE LIKE BUTTON
     ============================================================ */
  .like-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .like-btn {
    position: relative;
    width: 130px;
    height: 130px;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }
  .like-btn:focus-visible .heart-outline {
    filter: drop-shadow(0 0 8px #ff2d78);
  }

  /* Glow ring behind heart */
  .like-btn::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,60,140,.55) 0%, rgba(255,60,140,0) 65%);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
  }
  .like-btn:hover::before {
    opacity: .7;
    transform: scale(1);
  }

  /* Heart base (outline) */
  .heart-outline {
    width: 110px;
    height: 110px;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s;
    filter: drop-shadow(0 0 24px rgba(255,45,120,.35));
    transform-origin: center;
  }
  .like-btn:hover .heart-outline {
    transform: scale(1.08);
  }
  .like-btn:active .heart-outline {
    transform: scale(.9);
  }

  /* Checkbox is the state engine */
  #heart {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  /* Fill heart overlay — clips/spreads in*/
  .heart-fill {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 4;
  }

  .heart-fill svg {
    width: 110px;
    height: 110px;
    transform: scale(0);
    transform-origin: center;
    transform-box: fill-box;
    filter: drop-shadow(0 0 10px #ff2d78);
    transition: transform .18s ease-out;
  }

  /* When checked -> heart pops in */
  #heart:checked ~ .like-btn .heart-fill svg {
    animation: heartPop .55s cubic-bezier(.34,1.56,.64,1) forwards;
  }

  /* OUTLINE reacts: shake + shrink while it's replaced */
  #heart:checked ~ .like-btn .heart-outline {
    animation: outlineShake .5s ease-out forwards;
  }

  /* Burst container */
  .burst {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
  }
  #heart:checked ~ .burst {
    animation: burstFlash 1s ease-out forwards;
  }

  .burst .ring {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 3px solid rgba(255, 60, 150, .9);
    animation: ringExpand 1s ease-out forwards;
  }
  .burst .ring.r2 {
    border-color: rgba(120, 200, 255, .85);
    animation-delay: .08s;
    animation-duration: 1.1s;
  }
  .burst .ring.r3 {
    border-color: rgba(255, 220, 90, .85);
    animation-delay: .16s;
    animation-duration: 1.2s;
  }

  /* Particle stars */
  .spark {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #fff 0%, #ff5da0 60%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    animation: sparkFly 1s ease-out forwards;
    animation-delay: var(--d);
    transform: translate(0,0) scale(0);
  }
  #heart:checked ~ .burst .spark { opacity: 1; }

  /* Little hearts flying out */
  .fly-heart {
    position: absolute;
    font-size: 431px; /* fallback, overridden below */
    color: #ff3d7f;
    opacity: 0;
    animation: flyOut 1.15s ease-out forwards;
    animation-delay: var(--fd);
    filter: drop-shadow(0 0 4px rgba(255,45,120,.7));
    line-height: 1;
  }
  .fly-heart svg {
    width: 22px;
    height: 22px;
  }
  #heart:checked ~ .burst .fly-heart { opacity: 1; }

  /* ---------- Animations ---------- */
  @keyframes heartPop {
    0%   { transform: scale(0) rotate(-25deg); }
    40%  { transform: scale(1.25) rotate(8deg); }
    65%  { transform: scale(.92) rotate(-3deg); }
    80%  { transform: scale(1.08) rotate(2deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  @keyframes outlineShake {
    0%   { transform: scale(1) rotate(0); }
    20%  { transform: scale(1.15) rotate(-8deg); }
    40%  { transform: scale(.85) rotate(7deg); }
    60%  { transform: scale(1.1) rotate(-5deg); }
    100% { transform: scale(1) rotate(0); }
  }

  @keyframes ringExpand {
    0%   { transform: scale(.3); opacity: 1; border-width: 5px; }
    100% { transform: scale(2.4); opacity: 0; border-width: