Back to Dictionary
Action Feedback
●○○Ready to Use

Scale on Press

A simpler, non-spring version of tactile feedback where an element scales down slightly and instantly when pressed.

Live Demo

What It Is

A simpler, non-spring version of tactile feedback where an element scales down slightly and instantly when pressed.

✓When to Use

  • Secondary buttons
  • Icon buttons
  • Interfaces where pure CSS is preferred over heavy animation libraries

✕When NOT to Use

  • Large structural components

Configuration Tips

  • 01Scale down to 0.95 or 0.98 using a fast duration (e.g., 75ms or 100ms)

You've Seen It In

GitHubVercelNotion

Prompt Templates

Copy and paste these prompts into your AI coding assistant.

Make the button shrink slightly when I click it.

Code Example (Tailwind CSS)

export function ScaleOnPressDemo() {}

Related Effects

Haptic Bounce

A physical-feeling spring animation that rapidly shrinks an element on press and bounces it back on release, mimicking a tactile physical button.

Hover Lift Effect

A card or button smoothly translates upwards by a few pixels and increases its shadow cast, creating the illusion of moving closer to the user on hover.