Grow Buttons

About this block

Grow Buttons is a single row of five buttons spanning the standard variants: Default, Secondary, Destructive, Outline, and Ghost. Each button sits in a centered, wrapping flex row with consistent spacing. When a visitor hovers any button, it scales up smoothly and returns to its resting size when the cursor leaves.

All five variants are independent pieces. You can drop in any subset that fits your interface, relabel the copy to match your actions, and the scale effect travels with each one. Nothing in the block couples the buttons together, so removing or reordering them does not affect the remaining ones.

When to use

Reach for this block when you want a lightweight motion cue on a call to action without changing its color or shape at rest. On an HR and hiring platform it works well for primary actions like "Apply Now" or "Schedule Interview" on a job detail page, where a touch of feedback reassures a candidate that the button is interactive before they click. It is a better choice than a pulse or border animation when you want the motion to feel instant and physical rather than continuous or decorative.

A natural flow around it on a Components page:

Before

• Extra Large Buttons to anchor the hero call to action before switching to a more contained size
• Cards presenting role listings or candidate profiles that each carry their own action button

After

• Shadow Buttons if you want to layer a lifted depth effect on top of the scale motion in a separate section
• Badges to tag status or category alongside the actions

What you can customize

Five variants are shown together, but in practice you will use one or two per context. A few common ways to apply them:

• Primary form actions. Swap the Default variant onto a submit button in an application form so candidates feel a clear response when they hover before committing.
• Destructive confirmations. Place the Destructive variant on a withdraw or delete action so the scale cue draws attention without needing extra color changes.
• Quiet secondary links. Use the Ghost variant beside a bold primary button to give the secondary action a subtle interactive signal that does not compete visually.

Tip: if multiple grow buttons appear close together, keep the gap between them wide enough that scaling one does not visually crowd its neighbor.