Sistema de estilos de botones consistentes para iqEngi (Cards, CTAs, Formularios)
Este skill define los estilos de botones estándar para mantener consistencia visual en todo el proyecto.
---
Usar para: **Inscribirse, Comprar, Guardar, Enviar, Ver Detalles principal**
```html
<!-- 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**
```html
<!-- 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**
```html
<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 | `h-10 min-h-[40px]` | `rounded-xl` |
| Hero / CTA sections | `btn-lg` | Auto | `rounded-full` |
| Formularios | Normal | `h-10 min-h-[40px]` | `rounded-xl` |
| Navbar | `btn-sm` o Normal | Auto | Default |
---
Todos los botones deben incluir:
```css
/* 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
```
---
```tsx
<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>
```
```tsx
<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>
```
```astro
<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>
```
---
```html
<!-- ❌ 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-primary` | Color base del btn-primary |
| `--color-btn-hover` | Color hover (azul #2b7fff) |
| `--color-surface-2` | Background hover para btn-ghost |
---
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/button-styles/raw