BUTTON
描边填充按钮Border Fill Button
悬停时颜色从左到右把按钮"灌满"，描边按钮一秒变实心。
效果预览
适合用在哪
导航按钮、次级 CTA、任何想要利落手感的地方。
容易踩的坑
- 文字没放在 ::before 之上的层级，填色扫过时文字被色块盖住消失。
- 同一站点有的从左填、有的从下填、有的圆形扩散，交互语言杂乱不统一。
- 反色文字与填充底对比度低于 4.5:1，悬停后反而看不清按钮文案。
设计提示词 · Prompt
描边填充按钮（Border Fill Button）：按钮本身描边 + 文字主题色；::before 铺满按钮（背景 = 悬停后的底色）、transform:scaleX(0)、transform-origin:left。悬停时 scaleX 过渡到 1（300ms cubic-bezier(.32,.72,0,1)），同时文字颜色过渡为反色——文字要放 z-index 之上。填色方向可以变化：从左、从下（scaleY）、从圆形扩散（clip-path circle），但整站统一用一种。这是最低成本又最显功力的悬停效果之一。
Border Fill Button: the button itself has a border + theme-colored text; ::before covers the whole button (background = the post-hover fill color), transform:scaleX(0), transform-origin:left. On hover, scaleX transitions to 1 (300ms cubic-bezier(.32,.72,0,1)), while the text color transitions to the inverse color — the text must sit above in z-index. The fill direction can vary: from left, from bottom (scaleY), or a circular expansion (clip-path circle), but use only one across the whole site. This is one of the lowest-cost yet most skillful-looking hover effects.
常见搭配
同一页面里经常和「描边填充按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-fillwrap"> <button class="d-fillbtn">查看文档</button> <button class="d-fillbtn d-fillbtn--b">预约演示</button> </div>