如何实现按钮Hover时背景色从上至下的墨水填充式切换效果

要实现这种类似墨水从上到下填充的悬停效果，核心是通过分层结构+transform动画模拟填充过程，而非直接切换背景色。以下是具体实现方案：

实现思路 #

1. 按钮容器设置相对定位和溢出隐藏，确保动画元素不会超出按钮边界
2. 拆分两个层级：上层用于显示文字，下层专门实现填充动画
3. 填充层初始高度为0，悬停时通过scale-y变换让高度从0过渡到100%，模拟从上到下的填充动作

完整代码示例 #

<button class="group relative whitespace-nowrap rounded-2xl border border-black px-4 py-2 overflow-hidden">
  <!-- 文字层：悬浮在填充层上方 -->
  <span class="relative z-10 text-white group-hover:text-black transition-colors duration-1000 ease-in-out">See My Work</span>
  <!-- 填充层：实现从上到下的动画 -->
  <span class="absolute inset-0 rounded-2xl bg-white origin-top scale-y-0 group-hover:scale-y-100 transition-transform duration-2000 ease-in-out"></span>
</button>

代码细节说明 #

• 按钮容器：relative让内部绝对定位元素以按钮为参照，overflow-hidden裁剪填充层的溢出部分
• 文字层：relative z-10确保文字始终在填充层上方，group-hover:text-black配合过渡实现文字颜色切换
• 填充层：
  • absolute inset-0让元素完全覆盖按钮
  • origin-top设置变换原点为顶部，保证动画从上方开始
  • scale-y-0初始状态高度为0，group-hover:scale-y-100悬停时高度变为100%
  • transition-transform duration-2000控制填充动画的时长和类型，ease-in-out让动画节奏更自然

自定义调整 #

• 若要改变填充方向，把origin-top改成origin-bottom即可实现从下往上填充
• 调整duration-2000和duration-1000的数值，可分别控制填充动画和文字变色的速度
• 替换bg-white和text-black为目标颜色，就能适配不同主题

内容的提问来源于stack exchange，提问作者Lucid Polygon