Sistema de estilos de botones consistentes para iqEngi (Cards, CTAs, Formularios)
Sign in to like and favorite skills
Este skill define los estilos de botones estándar para mantener consistencia visual en todo el proyecto.
text-whiteUsar para: Inscribirse, Comprar, Guardar, Enviar, Ver Detalles principal
<!-- Tamaño Normal (Cards, Formularios) --> <button class="btn btn-primary h-10 min-h-[40px] px-6 text-white shadow-md shadow-primary/20 hover:bg-[var(--color-btn-hover)] hover:border-[var(--color-btn-hover)] hover:shadow-lg hover:shadow-[var(--color-btn-hover)]/40 hover:scale-[1.03] rounded-xl transition-all duration-300"> Acción Principal </button> <!-- Tamaño Grande (Hero, CTAs destacados) --> <button class="btn btn-primary btn-lg min-w-[160px] rounded-full shadow-lg shadow-primary/30 hover:bg-[var(--color-btn-hover)] hover:border-[var(--color-btn-hover)] hover:shadow-xl hover:shadow-[var(--color-btn-hover)]/40 hover:scale-105 transition-all duration-300"> Explorar Cursos </button>
Usar para: Ver Detalles, Cancelar, Opciones alternativas
<!-- Tamaño Normal --> <button class="btn btn-outline h-10 min-h-[40px] hover:!bg-[var(--color-btn-hover)] hover:!border-[var(--color-btn-hover)] hover:!text-white rounded-xl transition-all duration-300"> Ver Detalles </button> <!-- Tamaño Grande --> <button class="btn btn-outline btn-lg rounded-full hover:bg-[var(--color-btn-hover)] hover:border-[var(--color-btn-hover)] hover:text-white hover:scale-105 transition-all duration-300"> Saber Más </button>
Usar para: Enlaces de navegación, acciones de bajo énfasis
<button class="btn btn-ghost btn-lg min-w-[160px] rounded-full hover:bg-[var(--color-surface-2)]"> Unirse a la Comunidad </button>
| Contexto | Tamaño Base | Altura | Border Radius |
|---|---|---|---|
| Cards (CourseCard, Cards) | Normal | | |
| Hero / CTA sections | | Auto | |
| Formularios | Normal | | |
| Navbar | | Auto | Default |
Todos los botones deben incluir:
/* Para Primary */ hover:bg-[var(--color-btn-hover)] hover:border-[var(--color-btn-hover)] hover:shadow-lg hover:shadow-[var(--color-btn-hover)]/40 hover:scale-[1.03] /* o hover:scale-105 para btn-lg */ transition-all duration-300 /* Para Outline */ hover:!bg-[var(--color-btn-hover)] hover:!border-[var(--color-btn-hover)] hover:!text-white transition-all duration-300
<div className="grid grid-cols-2 gap-3 mt-4 pt-4 border-t border-base-200"> <a href={`/cursos/${slug}`} className="btn btn-outline h-10 min-h-[40px] hover:!bg-[var(--color-btn-hover)] hover:!border-[var(--color-btn-hover)] hover:!text-white rounded-xl transition-all duration-300" > Ver Detalles </a> <button className="btn btn-primary h-10 min-h-[40px] text-white shadow-md shadow-primary/20 hover:bg-[var(--color-btn-hover)] hover:border-[var(--color-btn-hover)] hover:shadow-lg hover:shadow-[var(--color-btn-hover)]/40 hover:scale-[1.03] uppercase font-bold tracking-wide rounded-xl transition-all duration-300"> Inscribirme </button> </div>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center"> <a href="/cursos" className="btn btn-primary btn-lg min-w-[160px] rounded-full shadow-lg shadow-primary/30 hover:bg-[var(--color-btn-hover)] hover:border-[var(--color-btn-hover)] hover:shadow-xl hover:shadow-[var(--color-btn-hover)]/40 hover:scale-105 transition-all duration-300" > Explorar Cursos </a> <a href="/comunidad" className="btn btn-ghost btn-lg min-w-[160px] rounded-full hover:bg-[var(--color-surface-2)]" > Unirse a la Comunidad </a> </div>
<a href={`/cursos/${slug}`} class="btn btn-primary h-10 min-h-[40px] px-6 text-white shadow-md shadow-primary/20 hover:bg-[var(--color-btn-hover)] hover:border-[var(--color-btn-hover)] hover:shadow-lg hover:shadow-[var(--color-btn-hover)]/40 hover:scale-[1.03] uppercase font-bold tracking-wide w-full md:w-auto rounded-xl transition-all duration-300" > Ver Detalles </a>
<!-- ❌ Sin hover states --> <button class="btn btn-primary">Acción</button> <!-- ❌ Mezclar estilos de tamaño --> <button class="btn btn-primary btn-lg h-10">Inconsistente</button> <!-- ❌ Border radius inconsistente --> <button class="btn btn-primary rounded-md">No usar rounded-md</button> <!-- ❌ Colores hardcodeados --> <button class="bg-purple-500 hover:bg-purple-600">No usar colores directos</button>
Definidas en
src/styles/global.css| Variable | Uso |
|---|---|
| Color base del btn-primary |
| Color hover (azul #2b7fff) |
| Background hover para btn-ghost |
src/components/molecules/CourseCard.tsxsrc/components/home/Hero.tsxsrc/components/sections/CoursesHero.astro