Bouton pilule pressable
Un bouton arrondi qui se tasse un peu quand on appuie dessus et reprend sa taille avec un ressort.
Réglages
Code
import { motion } from "framer-motion";
interface PressPillProps {
text?: string;
color?: string;
scale?: number;
}
export default function PressPill({
text = "Continuer",
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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Boutons
Où l’utiliser
C’est le bouton à tout faire d’une bonne interface : « Continuer » dans un panier, « Suivant » dans un onboarding, « Confirmer la réservation » dans une application. Cette légère pression donne le même retour qu’un vrai bouton, et chaque tap paraît pris en compte même avec une connexion lente. De tous les effets de pression, c’est celui dont on ne se lasse pas.
Laissez l’échelle de pression vers 0,96 ; bien en dessous, il commence à ressembler à un jouet. Comme il réagit au toucher et non au survol, c’est l’un des rares effets aussi agréables sur téléphone que sur ordinateur.