UI Skillbook
2

Animated Buttons

Buttons that animate on hover with sweeping or pass-through fills, a moving arrow, actions that expand, and entrance effects.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-animated-buttons and follow the Siteplane Animated Buttons skill it prints for this task.

Paste this into your agent.

Animated Buttons add tactile motion to marketing calls to action, carousel arrows, learn-more links and a log out control. They keep normal Button behaviour and jump to their end state under reduced motion.

Install

bashnpx shadcn@4.18.0 add @siteplane/animated-buttons

Import it from @/siteplane/components/animated-buttons. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Button: Pick plain Button for everyday app actions where motion would distract.
  • vs Icon Morphs: Pick Icon Morphs for a menu toggle whose bars turn into a close icon.

Rules

  • Use FillSweepButton with sweep (reverse or through), arrow (bare or tile) and arrowDirection for the hover effects.
  • Give arrow-only buttons an aria-label, since they have no visible text.
  • Use ExpandingArrowButton for a link-style action and ExpandingLogoutButton for log out, where label doubles as the accessible name.
  • Treat entrance (grow, widen, fade) as a one-time mount effect; remount to replay it.
  • Make sure each action is clear without the motion, because disabled, loading and reduced-motion states do not animate.

Reference

  • Animated Buttons docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Animated. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-animated-buttons

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

12 Principles of Animationby raphaelsalaja

Apply Disney's 12 animation principles to web interfaces to make motion feel natural, organic, and human.

MotionExternalGitHub stars: 42

Animateby emilkowalski

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations.

MotionExternalGitHub stars: 51.4K

Animateby pbakaus

Enhance UX with purposeful animation and micro-interactions that support usability and delight.

MotionExternalGitHub stars: 95.1K

Animate Expoby emilkowalski

Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.

MotionExternalGitHub stars: 51.4K

Back to Siteplane UI