Botón de cristal esmerilado
Un botón translúcido que desenfoca lo que tiene detrás y cede un poco bajo el dedo al pulsarlo.
Ajustes
Código
import { motion } from "framer-motion";
interface GlassButtonProps {
text?: string;
}
export default function GlassButton({
text = "Ver detalles",
}: 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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Botones
Dónde usarlo
Los botones de cristal lucen cuando van encima de algo: la foto de portada de un hotel, un vídeo de fondo en la landing de un grupo de música o el mapa de una app de reparto. El desenfoque esmerilado mantiene el texto legible sin tapar la imagen. Si buscabas un botón glassmorphism en React, este lo hace con discreción.
Sobre un fondo liso el desenfoque no tiene nada con lo que trabajar y el botón se ve gris sin más, así que pruébalo sobre tu imagen real. Deja el texto corto y revisa el contraste tanto en las zonas claras como en las oscuras.