← Back to Prompts
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 和任意字重值。
Variable Font Button Set screenshot 1
## 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