BUTTON
文案切换按钮Label Swap Button
悬停时整行文案向上换掉，同一颗按钮说出下一步要做什么。
效果预览
悬停时整行文案换掉
适合用在哪
落地页主 CTA、定价卡片、想把「了解」推进成「预约」的转化按钮。
容易踩的坑
- 两行文案长短差太多又没预留宽度，切换时按钮变窄，整行布局跳动。
- 第二行换成与动作无关的句子（比如突然出现价格），用户以为点到了别的控件。
- 只在 :hover 上切换，键盘聚焦时文案不变。
设计提示词 · Prompt
文案切换按钮（Label Swap Button）：按钮 overflow:hidden，高度固定 44-48px。两行文案叠在一个纵向容器里，每行高度等于按钮高度、水平居中。悬停和 focus-visible 时容器 translateY(-100%)，280-360ms cubic-bezier(.32,.72,0,1)。两行必须是同一个动作的两种说法（「了解方案」→「预约演示」），不要换成无关句子。宽度按较长的那行预留，避免切换时按钮变窄。字号、字重与普通主按钮一致。
Label Swap Button: overflow:hidden and a fixed height of 44-48px. Stack two labels in a vertical container, each exactly as tall as the button and centered horizontally. On hover and focus-visible, translate the container by -100% over 280-360ms with cubic-bezier(.32,.72,0,1). The two lines must be two phrasings of the same action ("See the plan" → "Book a demo"), not an unrelated sentence. Reserve width for the longer line so the button doesn't shrink mid-swap. Type size and weight match a normal primary button.
常见搭配
同一页面里经常和「文案切换按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-swapwrap">
<button class="d-swapbtn" type="button">
<span class="d-swapbtn__face"><span>了解方案</span><span>预约演示</span></span>
</button>
<span class="d-tiny">悬停时整行文案换掉</span>
</div>