Button & CTA Animation Principles

Apply Disney's 12 principles to create buttons that feel alive and responsive.

Principles Applied to Buttons

1. Squash & Stretch

Scale buttons slightly on press: transform: scale(0.95) on :active, return to scale(1) on release. Creates tactile feedback.

2. Anticipation

Subtle hover lift before click: transform: translateY(-2px) prepares users for the action.

3. Staging

Primary CTAs should be visually prominent. Use size, color contrast, and whitespace. Animate primary buttons more boldly than secondary.

4. Straight Ahead & Pose to Pose

Use pose-to-pose for button states: define clear keyframes for default, hover, active, and disabled states.