Interaction
Variable Font Button Set
A set of text-only buttons exploring variable font weight interpolation and subtle ink-trap aesthetics.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
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.
Chinese Prompt
创建一组展示可变字重动画的按钮。在浅色背景上水平排列三个纯文字按钮。每个按钮标签在悬停时应从字重 300 动画过渡到 700,过渡平滑 250ms。添加一条细下划线,悬停时从 0% 增长到 100% 宽度。使用现代可变字体(如 Inter 或任意无衬线可变字体回退)。字体是主角——无填充背景、无边框、无图标。使用 Tailwind CSS 和任意字重值。

Overview
A typography-first button exploration. Variable font weight replaces color and borders as the primary interaction signal.
Features
- Three text-only buttons
- Variable font weight 300 → 700 on hover
- Expanding underline animation
- Light background
- No icons, no borders, no fills
- Pure typography-driven interaction
Usage
Use for minimal editorial sites, portfolios, or navigation where typography is the brand.
Customization
Modify the prompt to:
- Add letter-spacing animation alongside weight
- Use a serif variable font for a different mood
- Add a subtle color shift on hover
- Arrange vertically for a sidebar menu