Search blocks by description or jump to a page.
Buttons that squeeze inward on press for satisfying tactile feedback. Use on mobile flows and forms where every tap should feel confirmed fast.
Squeeze Buttons is a centered row of five button variants displayed in a wrapping flex layout. The five variants shown are Default, Secondary, Destructive, Outline, and Ghost. On hover each button narrows slightly on the horizontal axis and stretches on the vertical axis, producing a squeeze and rebound effect that makes the press feel tactile and confirmed.
All five variants apply the same transition so the feedback is consistent across the set. The buttons are independent of each other: you can keep one variant, remove the rest, change the labels, or swap in any other button variant from your design system without affecting the squeeze behavior on the remaining buttons.
This block suits interfaces where touch and click confidence matters. On a real estate marketplace, for example, property search filters, inquiry submissions, and save listing actions all benefit from feedback that tells the user the tap registered. The squeeze effect is more grounded and precise than a scale grow, which makes it a better fit for form actions and confirmations than for purely decorative hero calls to action.
A natural flow around it on a Components page:
Before
After
Each button in the row is fully independent. You can swap labels, variants, or the number of buttons displayed to match your interface:
Tip: pair the squeeze effect with a single primary variant on mobile tap targets so users get clear confirmation without visual clutter.