Interaction
可变字体按钮组
一组纯文字按钮,探索可变字重插值和微妙的墨陷美学。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a button set that demonstrates variable font weight animation. Use three text-only buttons arranged horizontally on a light background. Each button label should animate from font-weight 300 to 700 on hover, with a smooth 250ms transition. Add a thin underline that grows from 0% to 100% width on hover. Use a modern variable font (e.g., Inter or any sans-serif variable font fallback). Typography should be the hero—no filled backgrounds, no borders, no icons. Use Tailwind CSS and arbitrary font-weight values.
中文提示词
创建一组展示可变字重动画的按钮。在浅色背景上水平排列三个纯文字按钮。每个按钮标签在悬停时应从字重 300 动画过渡到 700,过渡平滑 250ms。添加一条细下划线,悬停时从 0% 增长到 100% 宽度。使用现代可变字体(如 Inter 或任意无衬线可变字体回退)。字体是主角——无填充背景、无边框、无图标。使用 Tailwind CSS 和任意字重值。

Overview
一个以字体为先的按钮探索。可变字重取代颜色和边框,成为主要的交互信号。
Features
- 三个纯文字按钮
- 悬停时字重 300 → 700
- 下划线展开动画
- 浅色背景
- 无图标、无边框、无填充
- 纯字体驱动的交互
Usage
适用于极简编辑网站、作品集或以字体为品牌的导航。
Customization
修改 prompt 以:
- 为字重动画添加字间距变化
- 使用衬线可变字体营造不同氛围
- 悬停时添加微妙颜色变化
- 垂直排列用于侧边栏菜单