Exploding like buttonOne-line

GPT-5 Nano

by OpenAIReasoningClean

Open in new window

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

How it went

Total time: 20.5 s
Cost: $0.0011
Output tokens: 2,758
Spent thinking: 0 tokens
Speed: 139.8 tok/s
Console errors: 0

First token after: 809 ms
First visible text after: 809 ms
Prompt tokens: 356
Code size: 8.8 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-5-nano
Reasoning sent: {"effort":"minimal"}
Max output: 128,000 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 · 324 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pure CSS Like Button with Crazy Click Animation</title>
<style>
  :root{
    --bg: #0e0f15;
    --card: #141821;
    --pink: #ff4d90;
    --pink-dark: #e61f7a;
    --white: #fff;
    --shadow: 0 10px 25px rgba(0,0,0,.35);
  }

  *{box-sizing:border-box}

  html,body{
    height:100%;
    margin:0;
    background: radial-gradient( circle at 20% -10%, rgba(255,120,170,.14), transparent 40% ),
                radial-gradient( circle at 100% 0%, rgba(0,190,255,.12), transparent 40% ),
                linear-gradient(#0b0e14,#0b0e14 60%, #0b0e14);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system;
    color: #eaeaf0;
  }

  .wrap{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 20px;
  }

  .card{
    width: min(720px, 90vw);
    background: linear-gradient(135deg, rgba(20,24,40,.95), rgba(18,22,40,.92));
    border-radius: 20px;
    padding: 28px 28px 32px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
  }

  .header{
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
  }

  .title{
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing:.2px;
  }

  .hint{
    font-size:.85rem;
    color:#cbd5e1;
  }

  /* Pure CSS Like Button */
  .like-btn{
    --size: 120px;
    --bg: #1b1f2a;
    --ring: rgba(255, 77, 144, .65);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display:grid;
    place-items:center;
    border: none;
    cursor: pointer;
    outline: none;
    position: relative;
    background: conic-gradient(from 180deg at 50% 50%, #2a2f3a 0 25%, #1a1f2b 25% 50%, #2a2f3a 50% 75%, #1a1f2b 75% 100%);
    box-shadow: inset 0 0 0 2px #2a3242, 0 10px 24px rgba(0,0,0,.4);
    transition: transform .25s ease;
    transform: translateZ(0);
    isolation: isolate;
  }

  /* Face of the button (heart) */
  .heart{
    width: 56px;
    height: 56px;
    position: relative;
    transform: scale(1);
    filter: drop-shadow(0 4px 12px rgba(255,0,120,.6));
    transition: transform .25s ease;
  }

  .heart:before,
  .heart:after{
    content: "";
    position: absolute;
    width: 42px;
    height: 66px;
    background: #ff4d90;
    top: 0;
    left: 9px;
    border-radius: 42px 42px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }

  .heart:after{
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }

  /* Base state for unliked */
  .like-btn .heart{
    background: #ff5aa2;
  }

  /* When with checkbox hack (no JS) to simulate toggle keeping state via :checked */
  /* We'll use an invisible checkbox to store state, CSS only */
  input#toggle {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
  }

  /* The visible button responds to the checkbox state */
  #toggle:checked + label.like-btn {
    animation: pop 800ms ease forwards;
  }

  /* Crazy animation sequence when liked (pure CSS) */
  @keyframes pop {
    0% {
      transform: scale(1);
    }
    12% {
      transform: scale(1.08) rotate(-6deg);
    }
    20% {
      transform: scale(1.12) rotate(6deg);
    }
    28% {
      transform: scale(0.98) rotate(-4deg);
    }
    36% {
      transform: scale(1.04) rotate(4deg);
    }
    44% {
      transform: scale(0.96) rotate(-2deg);
    }
    52% {
      transform: scale(1.02) rotate(2deg);
    }
    60% {
      transform: scale(1) rotate(0);
    }
    68% {
      transform: translateY(-6px) rotate(0);
    }
    76% {
      transform: translateY(-12px) rotate(-3deg);
    }
    84% {
      transform: translateY(-6px) rotate(3deg);
    }
    92% {
      transform: translateY(-2px) rotate(0);
    }
    100% {
      transform: translateY(0) scale(1);
    }
  }

  /* Sparkles burst using pseudo elements and CSS animation */
  .like-btn:after, .like-btn:before{
    content:"";
    position:absolute;
    left:50%; top:50%;
    width:0; height:0;
    opacity:0;
    pointer-events:none;
  }

  /* Sparkles appear only when checked (liked) */
  #toggle:checked + label.like-btn:before,
  #toggle:checked + label.like-btn:after{
    opacity:1;
    transform: translate(-50%,-50%);
  }

  /* Create a few tiny particles via generated content using box-shadow trick on a small dot */
  .sparkles{
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #ffd6f4 40%, transparent 41%);
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
  }

  /* Generate multiple sparkles using pseudo elements on the label when checked */
  #toggle:checked + label.like-btn .sparkle-1,
  #toggle:checked + label.like-btn .sparkle-2,
  #toggle:checked + label.like-btn .sparkle-3,
  #toggle:checked + label.like-btn .sparkle-4 {
    opacity: 1;
    animation: sparkle 700ms ease forwards;
  }

  @keyframes sparkle {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
    20% { transform: translate(-60%, -90%) scale(1.1); opacity: 1; }
    60% { transform: translate(30px, -120px) scale(0.7); opacity: 0.9; }
    100% { transform: translate(90px, -150px) scale(0.2); opacity: 0; }
  }

  /* Layout tweaks for accessibility and look */
  .panel{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
  }

  /* Instruction text visible on load */
  .start-note{
    font-family: ui-sans-serif;
    color:#cbd5e1;
    font-size:.92rem;
    text-align:center;
    margin-top:6px;
  }

  /* Resets for focus outline visible when keyboard navigates */
  .like-btn:focus-visible{
    outline: 2px solid #ffd1e9;
    outline-offset: 2px;
  }

  /* Responsive adjustments */
  @media (max-width: 600px){
    .card{ padding:22px; }
    .like-btn{ width: 100px; height: 100px; --size:100px; }
    .heart{ width: 46px; height:46px; }
  }

  /* Hide the label default text spill; we rely on a11y label hidden visually but readable for screen readers */
  .sr-only{
    position:absolute!important;
    width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  /* Subtle glow around the button when active (supported purely via CSS) */
  #toggle:checked + label.like-btn{
    box-shadow: 0 0 0 rgba(0,0,0,0);
    animation: glow 800ms ease forwards;
  }

  @keyframes glow {
    0% { box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); }
    40% { box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 18px rgba(255,77,144,.6); }
    100% { box-shadow: inset 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0); }
  }
</style>
</head>
<body>
  <div class="wrap" aria-label="Pure CSS like button demo">
    <div class="card" role="region" aria-label="Like button with CSS animation">
      <div class="header">
        <div class="title">Pure CSS Like Button with Crazy Animation</div>
        <div class="hint" aria-live="polite">No JavaScript required. Click or tap to like.</div>
      </div>

      <!-- Invisible checkbox stores state; when checked, CSS triggers animation -->
      <input type="checkbox" id="toggle" aria-hidden="true" />

      <!-- The clickable area includes a fancy heart inside a circular button -->
      <!-- The label is used to attach to the checkbox without JS -->
      <label for="toggle" class="like-btn" aria-label="Like">
        <span class="heart" aria-hidden="true"></span>

        <!-- Sparkle elements (hidden until like) -->
        <span class="sparkles sparkle-1" aria-hidden="true"></span>
        <span class="sparkles sparkle-2" aria-hidden="true"></span>
        <span class="sparkles sparkle-3" aria-hidden="true"></span>
        <span class="sparkles sparkle-4" aria-hidden="true"></span>

        <!-- Subtle decorative inner glow dots for extra flair -->
        <span class="sr-only" aria-hidden="true">Like button</span>
      </label>

      <!-- Instruction text shown on first paint to guide user -->
      <div class="start-note" aria-live="polite" style="margin-top:14px;">
        Click the round pink button to start the crazy animation.
      </div>
    </div>
  </div>

  <script>
    // Lightweight script to ensure the button is clickable in all environments
    // and to reset animation if clicked again by programmatic means.
    (function(){
      var toggle = document.getElementById('toggle');
      // After the first interaction, allow repeated toggles to replay animation
      toggle.addEventListener('change', function(){
        // Force reflow to restart CSS animation when toggled again
        void toggle.offsetWidth;
      });
      // Provide a subtle hint: keyboard focus enters only after click as required
      // Do not enable any persistent storage or network requests.
    })();
  </script>
</body>
</html>