mcpField
B
buttons-ctas

buttons-ctas

github.com/dylantarre设计与 UI132556 次安装43 周前更新
代码仓库

关于 buttons-ctas

面向界面设计者的按钮动画设计指南，将迪士尼 12 条动画原则应用于按钮与 CTA，涵盖状态反馈、时序和 CSS 属性。

主要功能

  1. 01按压与悬停动效
  2. 02按钮状态关键帧
  3. 03缓动与时长建议
  4. 04成功和错误状态动画
  5. 05CSS 动画属性指导

适用场景

  1. 01设计有触感反馈的 CTA
  2. 02规划悬停、按压和禁用状态
  3. 03为按钮成功或错误状态添加动效

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/dylantarre/animation-principles --skill buttons-ctas

安装后在 Claude Code 中输入/buttons-ctas确认已加载。

详细介绍

按钮与 CTA 动画原则

运用迪士尼的 12 条原则，让按钮更鲜活、响应更灵敏。

按钮中的原则

1. 挤压与拉伸

按下时稍微缩小按钮：在 :active 上设置 transform: scale(0.95)，松开时恢复为 scale(1)。营造触感反馈。

2. 预备动作

点击前轻微上移：transform: translateY(-2px)，让用户做好操作准备。

3. 舞台呈现

主要 CTA 应在视觉上突出。使用尺寸、色彩对比和留白。主要按钮的动画幅度应大于次要按钮。

4. 连续动作与关键姿势

使用关键姿势来定义按钮状态：为默认、悬停、按下和禁用状态设置清晰的关键帧。

5. 跟随动作与重叠动作

点击后，按钮恢复原状时，让阴影或光晕稍后再稳定下来。按钮内部的图标可以比按钮的移动延迟 20-50ms。

6. 缓入与缓出

不要使用线性计时。悬停进入时使用 ease-out（快速开始），悬停离开时使用 ease-in（平缓退出）。cubic-bezier(0.4, 0, 0.2, 1) 效果不错。

7. 弧线运动

浮动操作按钮在重新定位时应沿弧线移动。使用带缓动效果的 transform，而非直线移动。

8. 次要动作

涟漪效果、图标旋转或阴影变化应配合主要的缩放或颜色变化。不要让次要动作喧宾夺主。

9. 时长
  • 悬停：150-200ms
  • 按下：50-100ms（灵敏）
  • 焦点环：150ms
  • 加载状态过渡：200-300ms
10. 夸张

成功按钮可以短暂放大到 1.05，再恢复原状。错误状态可以加入轻微抖动（3-5px，2-3 次循环）。

11. 扎实绘制

在所有状态下保持一致的圆角和比例。阴影应始终符合光源方向。

12. 吸引力

圆角给人友好的感觉，尖角则显得专业。让按钮的个性与品牌相符。令人满意的点击反馈可以提高转化率。

CSS 实现

.btn {
  transition: transform 150ms ease-out,
              box-shadow 150ms ease-out,
              background-color 150ms ease-out;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn:active {
  transform: scale(0.97) translateY(0);
  transition-duration: 50ms;
}

关键属性

  • transform：缩放、平移
  • box-shadow：深度变化
  • background-color：状态指示
  • opacity：禁用状态
  • filter：悬停时的亮度

评论

支持 Markdown