React + MotionBotones

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.