Button Styles

Sistema de Botones Consistentes - iqEngi

Este skill define los estilos de botones estándar para mantener consistencia visual en todo el proyecto.

Filosofía de Diseño

• Jerarquía Visual: Primary para acciones principales, Outline para secundarias
• Consistencia: Mismo hover, transiciones y tamaños base
• Accesibilidad: Contraste AA garantizado con text-white sobre primary

🎨 Clases Base de Botones

1. Botón Primary (CTA Principal)

Usar 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>

2. Botón Outline (Secundario)

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>

3. Botón Ghost (Terciario/Navegación)

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>

📐 Reglas de Tamaño

🎭 Estados de Hover (Obligatorios)

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

📋 Plantillas Copiables

Card con dos botones (CourseCard)

<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>

Hero CTA (dos botones)

<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>

Botón único en Card simple

<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>

⚠️ Antipatrones (NO HACER)

<!-- ❌ 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>

🔧 Variables CSS Relacionadas

Definidas en src/styles/global.css:

Ejemplos de Archivos Correctos

• src/components/molecules/CourseCard.tsx - Patrón de 2 botones en card
• src/components/home/Hero.tsx - CTA principal con btn-lg
• src/components/sections/CoursesHero.astro - Hero con botones primary + outline