Live preview — fully interactive
The prompt
Build a magnetic CTA button micro-interaction. ## Structure - A wrapper element (with generous padding, e.g. 40px) acts as the magnetic field - Inside: a pill-shaped button containing a spotlight layer and a label span (both absolutely positioned / stacked) ## Magnetic behavior
Full prompt (1383 chars) unlocks after purchase
The code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #08080d; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: 'Inter', system-ui, sans-serif; }
.magnetic { position: relative; display:Complete self-contained HTML unlocks after purchase
About this effect
The classic award-site micro-interaction: as the cursor approaches, the button is pulled toward it with an elastic feel; the inner label moves at a different rate for depth. On hover a radial spotlight follows the cursor across the surface. Snaps back with a spring when the cursor leaves.