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…
Componente · Botones
Botón Magnético Coral
Prompt
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 tratamiento magnetic, forma rounded, icono arrow, color principal #6366f1, secundario #22d3ee y fondo #080b1c. 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
- magnetic
- rounded
- 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 «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…
Crea un botón «Brillo Rosa» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Shop the edit» con…
Crea un botón «Carrito Solar» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Add to cart» con…
Crea un botón «Minimalista Slate» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Learn more» con…
Crea un botón «Destello IA Violeta» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Generate with AI»…