CSS 按钮生成器

一个好的按钮不只需要背景色，还要有悬停状态、按下状态、清晰的键盘焦点环、易读的文字和平滑的过渡。这个生成器根据内边距、字体、颜色、边框、圆角和阴影等几项设置生成全部代码，并在 OKLCH 中把背景调暗来计算悬停和按下颜色，这样色相保持不变。它按 WCAG 检查文字对比度，并在您自己的浏览器中并排渲染常态、悬停、按下和焦点四种状态。

使用方法

1. 输入按钮文字，设置内边距、字号和字重。
2. 选择背景色、文字颜色、边框颜色和圆角。
3. 保持自动悬停颜色或自己选一个，再设置焦点环和过渡时间。
4. 复制 CSS 和 HTML 之前，先看一下对比度那一行。

计算公式

悬停 = OKLCH(L − 0.08, C, H) · 按下 = OKLCH(L − 0.12, C, H) · 对比度 = (L₁ + 0.05) ÷ (L₂ + 0.05)

OKLCH 明度范围是 0 到 1，所以 0.08 就是 8 点。如果变暗后的颜色超出 sRGB，就按 CSS Color 4 的色域映射方法降低其色度。对比度使用 WCAG 相对亮度计算，并且是截断而不是四舍五入。

示例

默认蓝色 #2563EB 的 OKLCH 明度是 0.546；调暗 8 点得到悬停颜色 #0B48CF，调暗 12 点得到按下颜色 #003BC1。#2563EB 上的白色文字对比度为 5.16:1，达到普通文字的 WCAG AA（4.5:1），但未达到 AAA（7:1）。