MOTION HUB

液态按钮

Liquid Button
#liquid-button · 32/72
HOVER · 悬停交互

参数调改

PLAYGROUND
主填充色--fill_color
副填充色--fill_color_alt
文字颜色--text_color
过渡时长--dur_ms
2001200
ms
按钮圆角--radius_px
0999
px
缓动曲线--ease

实现要点

NOTES
  1. 01

    两个 175% 宽的圆形 blob 藏在按钮两端(scale 0.1 且位移出界),hover 时用 transform 位移+缩放滑向中央合拢,overflow:hidden 裁出液体边缘。

  2. 02

    isolation:isolate 让 z-index:-1 的 blob 落在按钮背景之上、文字之下,避免负 z-index 逃逸到页面底层。

  3. 03

    运动全程只有 transform(合成器路径),hover 触发零重排;过冲曲线(y > 1)让合拢瞬间有轻微回弹,是『液感』的关键。

  4. 04

    --radius_px 从 0(直角矩形)到 999(胶囊)连续可调,blob 直径按按钮宽度百分比推导,宽度变化无需改参数。

  5. 05

    prefers-reduced-motion 下把过渡时长压到 0.01ms,直接呈现填充后的终态。

  6. 06

    预览态自动演示:body 未被 hover 时 blob 走 body:not(:hover) 下的演示动画周期(5.2s 填充-退回),光标进入 iframe 后动画立即让位给真实 hover 过渡。

源代码

SOURCE

加载源代码…