playbooks

home / skills / dylantarre / animation-principles / buttons-ctas

buttons-ctas skill

/skills/07-by-ui-element/buttons-ctas

This skill helps you implement Disney-inspired button and CTA animations for tactile, responsive user interactions.

npx playbooks add skill dylantarre/animation-principles --skill buttons-ctas

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
2.6 KB
---
name: buttons-ctas
description: Use when animating buttons, CTAs, or clickable action elements to create satisfying, responsive interactions
---

# 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

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

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

Overview

This skill teaches how to animate buttons, CTAs, and clickable action elements using principles adapted from Disney’s animation toolkit. It focuses on creating tactile, responsive interactions that feel satisfying and boost user engagement. Practical CSS patterns and timing guidelines are included for real-world UI use.

How this skill works

The skill inspects button states and prescribes motion patterns for hover, press, focus, disabled, and loading states. It maps 12 animation principles to small UI elements: scaling, translation, timing, easing, shadow, and micro-interactions. Example CSS snippets and recommended durations make implementation straightforward.

When to use it

  • Designing or refining primary and secondary CTAs
  • Improving perceived responsiveness of interactive elements
  • Creating consistent motion systems for a product UI
  • Animating floating action buttons or icon buttons
  • Polishing focus, loading, and success/error states for accessibility

Best practices

  • Use subtle scale on press (scale ~0.95–0.98) for tactile feedback
  • Prefer non-linear easing (ease-out for hover-in, ease-in for hover-out) and avoid linear timing
  • Keep hover 150–200ms, press 50–100ms, focus 150ms, loading 200–300ms
  • Let secondary elements (icons, shadows) lag 20–50ms for follow-through
  • Maintain consistent radii, proportions, and light direction for shadows

Example use cases

  • Primary CTA: larger scale and stronger shadow on hover, snappy press scale on click to increase conversions
  • Secondary buttons: muted color shifts with a subtle icon rotation or ripple
  • Floating action button: arc-like reposition animation when moving between areas
  • Success state: brief exaggeration (scale to ~1.05) then settle for positive feedback
  • Error state: small horizontal shake (3–5px, 2–3 cycles) to draw attention

FAQ

Will these animations hurt performance?

When implemented with transform and opacity only, animations stay GPU-accelerated and performant. Avoid animating layout properties like width or margin on many elements at once.

How do I keep animations accessible?

Respect prefers-reduced-motion: provide instant state changes or simplified fades for users who opt out. Ensure focus outlines remain visible and timing doesn’t interfere with keyboard interactions.