Buttons Ctas
This is a solid reference for making buttons feel responsive and alive using Disney's 12 animation principles. It covers the essentials like squash and stretch on press, anticipation with hover lifts, and proper easing curves. The timing recommendations are specific and practical: 150-200ms for hover, 50-100ms for active states. You get concrete CSS examples with transforms, box shadows, and transition durations. The approach here isn't just about making things move, it's about creating tactile feedback that makes interactions satisfying. If you're building buttons that feel dead or unresponsive, the principles on follow through, secondary actions, and exaggeration will fix that.
- skills.sh installs
- 598
- GitHub stars
- 146
- last updated
- Aug 21, 2026
Install
$ npx -y skills add dylantarre/animation-principles --skill buttons-ctas --agent claude-codeInstalls into .claude/skills of the current project.
Files
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.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/dylantarre/animation-principles
- Categories
- Frontend Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from dylantarre/animation-principles
All 144- Figma Prototyping597
- Brand Marketing594
- Solid Drawing Mastery593
- Animator Traditional591
- Motion One589
- Naturalistic Motion589
- Attention Direction586
- Squash Stretch Mastery583
- Fintech Banking581
- Icons Badges581
- Staging Mastery581
- Gesture Responses579
- Arc Mastery578
- Follow Through Overlapping578
- Gaming Entertainment578
- Appeal Mastery577
- Accessibility Advocate576
- Anticipation Mastery575
- Entrance Animations572
- Modals Dialogs572
- Slow In Out Mastery572
- Spatial Thinking572
- Ux Researcher571
- Excitement Energy570
Recommended
More Frontend Development
mobile-first-designsecondsky/claude-skillsDesigns responsive interfaces starting from mobile screens with progressive enhancement for larger devices. Use when building responsive websites, optimizing fo598skills.sh installs
tanstack-querybobmatnyc/claude-mpm-skillsTanStack Query (React Query) for asynchronous server-state management with automatic caching, background refetching, optimistic updates, and pagination in React595skills.sh installs
slidesopenai/skillsCreate and edit presentation slide decks (`.pptx`) with PptxGenJS, bundled layout helpers, and render/validation utilities. Use when tasks involve building a ne589skills.sh installs
interactive-dashboard-builderanthropics/knowledge-work-pluginsBuild self-contained interactive HTML dashboards with Chart.js, dropdown filters, and professional styling. Use when creating dashboards, building interactive r586skills.sh installs
spec-to-repoalirezarezvani/claude-skillsUse when the user says 'build me an app', 'create a project from this spec', 'scaffold a new repo', 'generate a starter', 'turn this idea into code', 'bootstrap578skills.sh installs
uview-prouview-pro/skillsuView Pro 组件库完整技能集。Invoke when user needs to use uView Pro components, tools, hooks or layouts in uni-app project.575skills.sh installs