BUTTON
箭头滑入按钮Arrow Slide Button
箭头本来就在文字右侧，悬停时再往右滑一截，文字轻轻让开。
效果预览
适合用在哪
落地页主 CTA、卡片底部的「查看方案」、任何想提示「这里能继续」的按钮。
容易踩的坑
- 箭头用 width:0 藏起来，悬停时按钮突然变宽，旁边的元素被挤开。
- 静止时完全不显示箭头，截图和首屏第一眼都看不出这个模式。
- 只写了 :hover，键盘 focus-visible 时箭头不动，键盘用户得不到同一反馈。
设计提示词 · Prompt
箭头滑入按钮（Arrow Slide Button）：文字在左、箭头在右，箭头默认就占好宽度（约 14px），否则静止时看不出这个模式。悬停和 focus-visible 时文字左移 2px、箭头再向右滑 3-4px，过渡 280ms cubic-bezier(.32,.72,0,1)。箭头用行内元素，方便跟文字一起反色。按钮高度 44-48px，实心深色或品牌色。不要用 width 从 0 撑开，按钮宽度会跳。整站只选一种方向：箭头向右表示前往，不要混用向上的箭头。
Arrow Slide Button: label on the left, arrow on the right, and the arrow reserves its width (about 14px) by default — otherwise the resting state doesn't show the pattern. On hover and focus-visible the label shifts left 2px and the arrow slides another 3-4px to the right, over 280ms with cubic-bezier(.32,.72,0,1). Use an inline element for the arrow so it can invert color with the text. Button height 44-48px, solid dark or brand color. Don't grow the arrow from width:0 — the button width will jump. Pick one direction for the whole site: a right arrow means continue; don't mix in upward arrows.
常见搭配
同一页面里经常和「箭头滑入按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="display:flex;justify-content:center;padding:16px 0"> <button class="d-arrowbtn" type="button"><span>查看方案</span><i aria-hidden="true">→</i></button> </div>