Exploding like buttonOne-line

gpt-oss-120b

by OpenAIReasoningClean

Open in new window

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

How it went

Total time: 5.9 s
Cost: $0.0003
Output tokens: 645
Spent thinking: 59 tokens
Speed: 131.1 tok/s
Console errors: 0

First token after: 1.0 s
First visible text after: 1.6 s
Prompt tokens: 420
Code size: 1.8 KB
Finish reason: stop
Served by: Sail Research
Model id: openai/gpt-oss-120b
Reasoning sent: {"effort":"low"}
Max output: 64,000 tokens
Generated: Nov 11, 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 · 69 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pure‑CSS Like Button</title>
<style>
  body{font-family:sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;background:#f0f0f0;}
  .like-wrapper{position:relative;user-select:none;}
  /* hide the real checkbox */
  .like-checkbox{position:absolute;opacity:0;width:0;height:0;}
  .like-label{
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:1.5rem;
    color:#555;
    transition:color .3s;
  }
  .like-label::before{
    content:"♡";
    font-size:2rem;
    display:inline-block;
    transition:transform .3s;
  }
  /* when checked -> solid heart */
  .like-checkbox:checked + .like-label{
    color:#e0245e;
  }
  .like-checkbox:checked + .like-label::before{
    content:"♥";
    animation:likeCrazy 0.8s forwards;
  }
  @keyframes likeCrazy{
    0%   {transform:scale(1) rotate(0deg);}
    25%  {transform:scale(1.5) rotate(15deg);}
    50%  {transform:scale(0.8) rotate(-15deg);}
    75%  {transform:scale(1.2) rotate(10deg);}
    100% {transform:scale(1) rotate(0deg);}
  }
  /* small burst effect */
  .like-label::after{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:0; height:0;
    background:radial-gradient(circle, #e0245e 0%, transparent 70%);
    border-radius:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    opacity:0;
  }
  .like-checkbox:checked + .like-label::after{
    animation:burst 0.6s forwards;
  }
  @keyframes burst{
    0%   {width:0;height:0;opacity:.6;}
    70%  {width:120px;height:120px;opacity:.3;}
    100% {width:150px;height:150px;opacity:0;}
  }
</style>
</head>
<body>
<div class="like-wrapper">
  <input type="checkbox" id="like" class="like-checkbox">
  <label for="like" class="like-label">Like</label>
</div>
</body>
</html>

Reasoning trace (59 tokens)

We need pure CSS like button with animation on click. Use checkbox hack. Provide HTML with label and hidden checkbox. On :checked apply animation. Use keyframes for crazy animation (scale, rotate, color). Ensure visible. No JS. Provide responsive. Output HTML only.