Press feedback
Also called tap feedback, active state, or button press animation
A quick visual response, usually a slight shrink, that shows a button registered the press the moment a finger or mouse button goes down.
import type { ReactNode } from 'react';
import { motion } from 'motion/react';
const PRESSED = { scale: 0.97, filter: 'brightness(0.9)' };
type PressableButtonProps = {
children: ReactNode;
onClick?: () => void;
};
export function PressableButton({ children, onClick }: PressableButtonProps) {
return (
<motion.button
type='button'
onClick={onClick}
// whileTap listens to pointer events, so it works on iPhone Safari
// without the :active workaround, and it also responds to Enter.
whileTap={PRESSED}
transition={{ duration: 0.12, ease: 'easeOut' }}
className='rounded-full bg-primary px-5 py-2.5 text-sm font-medium text-primary-foreground'
>
{children}
</motion.button>
);
}Give every primary button press feedback: while pressed, scale it to 0.97 and darken its background one step with a 120ms ease-out transition, then return to normal on release. Make sure it also works on iPhone Safari and when the button is triggered from the keyboard.
Paste into Layerwise or any AI coding tool.
What is Press feedback?
Press feedback is what a button does while it is held down. The most common version scales the button to about 0.96 or 0.97 and darkens it a little, so it feels like a physical key being pushed. It shows up on pointer down, before the click completes, which is a big part of why an interface feels responsive.
Use it on buttons, cards, and list rows people tap. Keep the change subtle and fast, around 100 to 150ms, and return to normal on release. Shrinking to 0.9 or below starts to feel squishy.
In CSS this is the :active state. iOS Safari has a long-standing quirk where :active styles may not show unless a touch event listener is attached, which is why many sites add an empty ontouchstart handler. Motion's whileTap handles mouse, touch, and the Enter key for you.
Often confused with
- Hover effect
- A hover effect shows that something can be clicked before you click. Press feedback confirms the click while it happens.
Related terms
All termsRipple effect
A circle that spreads out from the exact spot you tap or click on a button and then fades, made popular by Google's Material Design.
Interaction states
The set of looks a control takes as people use it, such as default, hover, pressed, focused, and disabled, each showing what will happen.
Micro-interaction
A small moment of feedback around a single action, like a heart that bursts when tapped or a copy icon that turns into a checkmark.
Scale
A CSS transform that draws an element larger or smaller around its transform origin, without pushing neighboring elements.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.