Crea un botón «Brillo Medianoche» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Launch project» con…
Componente · Botones
Botón Onda Océano
Prompt
Crea un botón «Onda Océano» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Explore collection» con tratamiento ripple, forma pill, icono spark, color principal #0ea5e9, secundario #14b8a6 y fondo #effcff. Incluye estados default, hover, focus-visible, activo, carga, éxito, deshabilitado y protección para acciones destructivas. Soporta semántica button y anchor, iconos a izquierda/derecha, modo solo icono, tamaños, ancho completo, acciones asíncronas y prevención de clics duplicados. Anima transform y opacity sin layout shift; respeta prefers-reduced-motion. Exige teclado, nombre accesible, aria-busy, contraste WCAG AA y área táctil de 44px. Devuelve variantes tipadas, componente reutilizable, demo, dependencias y pruebas.
- Tipo
- Componente · Botones
- Tecnología
- React, TypeScript, Tailwind CSS, shadcn/ui
- Button
- ripple
- pill
- Animated
- CTA
«Crear en Drommo» abre un chat en el modo correcto con el prompt ya escrito. No se envía hasta que tú lo mandes.
Ideas parecidas
Crea un botón «Flecha Editorial» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Read the story» con…
Crea un botón «Éxito Esmeralda» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Complete order» con…
Crea un botón «Magnético Coral» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Get started» con…
Crea un botón «Brutalista Mono» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «SUBMIT NOW» con…
Crea un botón «Suave Lavanda» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Continue» con tratamiento…
Crea un botón «Scanline Cyber» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Initialize» con…
Crea un botón «Empresarial Azul» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Request demo» con…