React + MotionBotones

Botón píldora con pulsación

Un botón redondeado que se encoge un poco al pulsarlo y recupera su tamaño con un muelle al soltar.

Ajustes

0.96

Código

import { motion } from "framer-motion";

interface PressPillProps {
  text?: string;
  color?: string;
  scale?: number;
}

export default function PressPill({
  text = "Continuar",
  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 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

Es el botón currante de una buena interfaz: el «Continuar» de un checkout, el «Siguiente» de un onboarding o el «Confirmar reserva» de una app. Ese pequeño apretón da la misma respuesta que un botón físico, así que el toque se siente recibido aunque la conexión vaya lenta. De todos los efectos de pulsación, este es el que nunca cansa.

Deja la escala de pulsación cerca de 0,96; mucho más abajo empieza a parecer un juguete. Como reacciona al toque y no al hover, es de los pocos efectos que se sienten igual de bien en el móvil que en el portátil.