Material Ripple Button

Live preview — fully interactive

The prompt

Build a Material-style ripple button.

## Structure
- One button with overflow:hidden and position:relative

## Behavior
- Hover: brightness 1.08 and translateY(-1px)
- Active: scale(0.97)
- On click: spawn a .ripple span at the click point, size = max(width,height), animate scal

Full prompt (481 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; }
  .btn {
    position: relative; overflow: h

Complete self-contained HTML unlocks after purchase

About this effect

The Material ripple, rebuilt as a self-contained button: a circle is spawned at the click point, scales to 8x and fades, while the button itself dips to 0.97 and lifts on hover. Zero dependencies.