A button that only reacts on hover feels dead under the finger. The fix is small: give it an active/pressed state with a scale transform. The User Interface Wiki calls this physics-active-state — interactive elements should physically respond to being pressed.

Press both buttons below. The first has no active state; the second scales to 0.97 on tap and 1.02 on hover, settling with a balanced spring.

The rule

Deformation should stay subtle — the wiki recommends keeping squash/stretch in the 0.95–1.05 range. Anything more reads as a toy, not a tool.

<motion.button
  whileHover={{ scale: 1.02 }}
  whileTap={{ scale: 0.97 }}
  transition={{ type: "spring", stiffness: 500, damping: 30 }}
>
  Tactile
</motion.button>

Why a spring here

The press is interruptible — you can release at any point in the animation. spring-for-interruptible says interruptible motion should use springs, because a spring preserves the velocity already in the element instead of restarting from zero. A fixed-duration ease would snap awkwardly if you tapped twice in quick succession.