Button lab

View work 按钮的悬停与点击动画方案。版色和错版方向跟着这页的 logo 走,刷新页面会换。按钮可以用 Tab 聚焦测试键盘。

  1. 01 · Register

    套印回正

    静止时按钮后面有一块错位的墨线版,方向和 logo 这次的错版方向一致。悬停时墨线版穿过按钮滑到另一侧,像 logo 的副本穿过字母;按下时按钮压到版上,对准。

  2. 02 · Tag

    标签穿出

    最接近 logo:悬停时从按钮里沿错版方向穿出一张小标签(4 cases ↓),每次位置、倾斜都不同;移开时原路缩回。按下时标签拍平贴在按钮上。

  3. 03 · Peel

    撕角

    按钮当作一张贴纸:悬停时错版方向那一角翘起,露出贴纸背面;按下时角拍回去,按钮微微压扁。

  4. 04 · Plate swap

    换版

    悬停时下一种版色从错版方向的那个角铺满按钮,文字颜色跟着换(蓝底白字,其余黑字)。按下时确认这次换色;在首页上可以接 logo 的重抽,让 logo 和 hero 一起换色。