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