Press pill button
A rounded button that squeezes down a little when you press it and springs back when you let go.
Settings
Code
import { motion } from "framer-motion";
interface PressPillProps {
text?: string;
color?: string;
scale?: number;
}
export default function PressPill({
text = "Continue",
color = "#0071e3",
scale = 0.96,
}: PressPillProps) {
return (
<motion.button
type="button"
whileTap={{ scale }}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
className="rounded-full px-6 py-3 text-sm font-medium text-white shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)]"
style={{ backgroundColor: color }}
>
{text}
</motion.button>
);
}
Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Buttons
Where to use it
This is the quiet workhorse of a good interface: “Continue” in a checkout, “Next” in an onboarding flow, “Confirm booking” in an app. The small squeeze gives the same feedback as a physical button, so taps feel registered even on a slow connection. Of all the button press effects, this is the one people never get tired of.
Leave the press scale near 0.96; go much lower and it starts to look like a toy. Because it reacts to taps, not hover, it is one of the few button effects that feels just as good on a phone as on a laptop.