Scale on Press

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

Use

Secondary buttons

Avoid

Large structural components

Safer Alternative

No safer default listed.

Risk Level

Low risk

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

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Make the button shrink slightly when I click it.

Reference Implementation

The same implementation approach used by the live preview, kept compact enough to inspect and adapt.

'use client';
import { useState, useEffect } from 'react';
import { motion } from 'framer-motion';

export function ScaleOnPressDemo({ isPlaying = false }: { isPlaying?: boolean }) {
    const [isSimulatedPress, setIsSimulatedPress] = useState(false);

    useEffect(() => {
        if (!isPlaying) {
            setIsSimulatedPress(false);
            return;
        }
        const interval = setInterval(() => {
            setIsSimulatedPress(true);
            setTimeout(() => setIsSimulatedPress(false), 150);
        }, 1500);
        return () => clearInterval(interval);
    }, [isPlaying]);

    return (
        <div className="flex h-64 w-full items-center justify-center rounded-2xl bg-white p-6 shadow-sm ring-1 ring-stone-200">
            <motion.button
                animate={isSimulatedPress ? { scale: 0.95 } : { scale: 1 }}
                whileTap={{ scale: 0.95 }}
                className="min-w-[160px] rounded-xl bg-stone-900 px-10 py-4 text-base font-medium text-white shadow-sm hover:bg-stone-800"
            >
                Continue
            </motion.button>
        </div>
    );
}

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.