新栏目《999 个小技巧，让你 Vibe 的产品更有质感》 ✨ 001 富有点击手感的拟物按钮 Prompt 如下，可以直接抄 ⬇️ Define a tactile, skeuomorphic Button component with five variants, from strongest to weakest: primary, secondary, tertiary, ghost, text. If the project already has a component library or design system, do not add a new component: restyle its existing Button through its own variant and token system, and keep its API, props and accessibility as they are. Otherwise create one reusable Button with `variant` and `size` props. Style: calm and precise, like the Lumno browser extension and the Cloudflare dashboard. Neutral grays only, no brand hues. Lit from straight above. No glossy Web 2.0 shine, no glow, no large blur. Variants: 1. primary - near-black slate face (#404859 -> #273042), white label 2. secondary - raised white key (#FFFFFF -> #F4F5F7), dark gray label 3. tertiary - soft gray key (#F3F4F6 -> #E7E9EC), dark gray label 4. ghost - no face at rest; faint gray fill on hover; a recessed well when pressed 5. text - gray label with a thin underline and an arrow that nudges right on hover Every filled variant is the same five material layers; only the values change, so define them once as tokens and let each variant set its own: 1. Face: 180deg linear gradient, top 6-8% lighter than bottom. 2. Edge: 1px solid border one step darker than the bottom of the face (primary #12161F, secondary rgba(15,23,42,.14), tertiary rgba(15,23,42,.1)). 3. Top highlight: inset 0 1px 0 white (18% on slate, 85-100% on light faces). Put every inset layer in the button's own box-shadow, before the drop layers, never on a pseudo-element overlay: inset shadows on the element follow the inner radius (outer radius minus border), so the corners line up in every state. 4. Bottom shade: inset 0 -1px 0 black (22% on slate, 6% on light faces). 5. Drop shadow in two layers: a tight contact shadow 0 1px 2px plus a soft lift 0 4px 10px -3px (18% and 28% on slate, about a third of that on light faces). States (hover, pressed/active, focus-visible, disabled): - Hover: face one step lighter; the lift grows to 0 8px 16px -5px. - Pressed: translateY(1px); flip the gradient (darker on top); the outer shadow collapses to 0 1px 1px; the top highlight becomes an inner shadow, inset 0 1px 2px black (40% on slate, 12-16% on light faces). Light faces keep a 1px white line below, 0 1px 0 rgba(255,255,255,.9), like a key pressed into paper. - Give rest and pressed the same number of inset layers (pad with inset 0 0 0 transparent) so the shadow animates instead of jumping. - Focus-visible and disabled follow the library's existing conventions. - Timing: 120ms for transform, 140ms for shadows, 160ms for colors. Sizes: all values above are for the 14px label size: height 40px, padding 0 18px, radius 10px, label weight 600, optional 16px leading icon. On the slate face add a label text-shadow 0 -1px 0 rgba(0,0,0,.28). Scale the material with the type, never keep it at fixed pixels: express every length (height, padding, radius, border, icon, the 1px press offset, and every shadow offset, blur and spread) as a multiple of a size unit u = label size / 14. Provide two sizes: md (14px label, u = 1px) and lg (16px label, u = 16/14 px, so height 45.7px, radius 11.4px, lift shadow 0 4.6px 11.4px -3.4px). 尺寸：所有数值均适用于 14 像素的标签。标签的高度为 40 像素。 填充 0，宽度 18px，半径 10px。标签权重 600，可选字体大小 16px，带有图标。 在幻灯片面上添加如下标签样式：text-shadow 0 -1px 0 rgba(0,0,0,.28)。 使用相应的类型来缩放素材，切勿将其固定在固定的像素上：请表达出来。 各种长度（高度、填充、半径、边框、图标、1 像素的鼠标点击偏移量等） 以及每个阴影的偏移量、模糊程度以及扩散情况，所有这些参数都是按照某个尺寸单位来计算的。 u = 标签大小 / 14。提供两种尺寸：md（14 像素的标签，u = 1 像素）和 左图（16 像素标签，上距 16/14 像素，因此高度为 45.7 像素，半径 11.4 像素，带有提升阴影效果） 0 4.6 像素，11.4 像素，-3.4 像素。