Milchglas-Button
Ein durchscheinender Button, der den Hintergrund weichzeichnet und beim Drücken leicht nachgibt.
Einstellungen
Code
import { motion } from "framer-motion";
interface GlassButtonProps {
text?: string;
}
export default function GlassButton({
text = "Details ansehen",
}: 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 für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Buttons
Wofür du ihn nutzen kannst
Glas-Buttons kommen zur Geltung, wenn sie auf etwas liegen: dem Titelfoto eines Hotels, einem Videohintergrund auf der Landingpage einer Band oder der Karte in einer Liefer-App. Der Milchglas-Effekt hält den Text lesbar, ohne das Bild zu verdecken. Wer einen Glassmorphism-Button in React sucht, bekommt hier eine dezente Version.
Auf einem flachen, einfarbigen Hintergrund hat die Unschärfe nichts zu tun, und der Button wirkt einfach grau. Teste ihn also über deinem echten Bild. Halte den Text kurz und prüf den Kontrast auf hellen wie dunklen Stellen.