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…
Componente · Botones
Botón Suave Lavanda
Prompt
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 soft, forma square, icono check, color principal #d946ef, secundario #8b5cf6 y fondo #16051c. 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
- soft
- square
- 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 «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»…
Crea un botón «Confirmación Menta» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Confirm booking» con…
Crea un botón «Lujo Rubí» listo para producción usando React, TypeScript, Tailwind CSS, shadcn/ui, Framer Motion e iconos Lucide. Muestra el texto «Discover more» con tratamiento…