Bouton en verre dépoli
Un bouton translucide qui floute ce qui se trouve derrière lui et cède légèrement sous le doigt.
Réglages
Code
import { motion } from "framer-motion";
interface GlassButtonProps {
text?: string;
}
export default function GlassButton({
text = "Voir les détails",
}: GlassButtonProps) {
return (
<motion.button
type="button"
whileTap={{ scale: 0.96 }}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
className="rounded-full border border-black/10 bg-white/70 px-6 py-3 text-sm font-medium text-[#1d1d1f] dark:text-[#f5f5f7] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)] backdrop-blur-[20px] backdrop-saturate-[180%] dark:border-white/10 dark:bg-black/70"
>
{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
Les boutons en verre prennent tout leur sens posés sur quelque chose : la photo d’accueil d’un hôtel, une vidéo en fond sur la page d’un groupe de musique ou la carte d’une application de livraison. Le flou dépoli garde le texte lisible sans masquer l’image. Si vous cherchiez un bouton glassmorphism en React, celui-ci reste discret.
Sur un fond uni, le flou n’a rien à travailler et le bouton paraît juste gris : testez-le sur votre vraie image. Gardez un texte court et vérifiez le contraste sur les zones claires comme sur les zones sombres.