mcpField
B
buttons-ctas

buttons-ctas

github.com/dylantarreDesign & UI132556 installsUpdated 43w ago
Repository

About buttons-ctas

A design skill for applying Disney’s 12 animation principles to buttons and CTAs. It covers interaction states, timing, and CSS properties for interface designers.

Key features

  1. 01Press and hover motion
  2. 02Keyframes for button states
  3. 03Easing and duration guidance
  4. 04Success and error animations
  5. 05CSS animation properties

Use cases

  1. 01Designing tactile CTA feedback
  2. 02Planning hover, press, and disabled states
  3. 03Adding motion to success or error states

Install

Copy the command and run it in a terminal.

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

After installing, type/buttons-ctasin Claude Code to confirm it loaded.

Details

From the project README

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.

5. Follow Through & Overlapping Action

After click, let shadows or glows settle slightly after the button returns. Icon inside can lag 20-50ms behind button movement.

6. Ease In & Ease Out

Never use linear timing. Use ease-out for hover-in (fast start), ease-in for hover-out (gentle exit). cubic-bezier(0.4, 0, 0.2, 1) works well.

7. Arcs

Floating action buttons should move in arcs when repositioning. Use transform with easing rather than straight-line movement.

8. Secondary Action

Ripple effects, icon rotations, or shadow changes accompany the primary scale/color change. Don't let secondary actions overpower.

9. Timing
  • Hover: 150-200ms
  • Active/press: 50-100ms (snappy)
  • Focus ring: 150ms
  • Loading state transition: 200-300ms
10. Exaggeration

Success buttons can briefly scale to 1.05 before settling. Error states can include subtle shake (3-5px, 2-3 cycles).

11. Solid Drawing

Maintain consistent border-radius and proportions across states. Shadows should respect light source direction throughout.

12. Appeal

Round corners feel friendly, sharp corners feel professional. Match button personality to brand. Satisfying click feedback increases conversions.

CSS Implementation

.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;
}

Key Properties

  • transform: scale, translate
  • box-shadow: depth changes
  • background-color: state indication
  • opacity: disabled states
  • filter: brightness on hover

Comments

Markdown supported