Buttons

Sistema completo de botones modernos con efectos avanzados, múltiples variantes y estados optimizados para diferentes casos de uso.

Botones Básicos Mejorados

Todos los botones incluyen mejoras base como transiciones suaves, efectos hover mejorados y mejor accesibilidad.

Código de ejemplo:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>

Características Base

Mejoras Visuales

  • Border-radius más redondeado (lg)
  • Padding optimizado para mejor proporción
  • Transiciones suaves en todos los estados
  • Efecto hover con elevación (translateY)
  • Box-shadow mejorado

Accesibilidad

  • Focus ring mejorado con outline visible
  • Estados disabled optimizados
  • Contraste de colores mejorado
  • Soporte completo para navegación por teclado

Estilos Modernos

Botones Ghost

<button class="btn btn-ghost">Ghost Primary</button>
<button class="btn btn-ghost-white">Ghost White</button>

Botones Glass (Glassmorphism)

<button class="btn btn-glass">Glass Light</button>
<button class="btn btn-glass-dark">Glass Dark</button>

Botones Glow (Neón)

<button class="btn btn-glow">Glow Primary</button>
<button class="btn btn-glow-success">Glow Success</button>

Botón Animado

<button class="btn btn-animated">Gradiente Animado</button>

Efecto Ripple

Haz clic para ver el efecto 
<button class="btn btn-primary btn-ripple">Ripple Effect</button>

Botones Sociales



<button class="btn btn-social btn-google">Google</button>
<button class="btn btn-social btn-github">GitHub</button>
<button class="btn btn-social btn-linkedin">LinkedIn</button>

Tamaños de Botones

<button class="btn btn-primary btn-xs">Extra Small</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary btn-xl">Extra Large</button>

Formas Especiales

Botones Circulares

<button class="btn btn-primary btn-circle btn-circle-sm">S</button>
<button class="btn btn-primary btn-circle">M</button>
<button class="btn btn-primary btn-circle btn-circle-lg">L</button>

Botones Cuadrados

<button class="btn btn-primary btn-square">⚙️</button>

Botones Especiales

Floating Action Button (FAB)

<button class="btn btn-primary btn-fab">+</button>
<button class="btn btn-success btn-fab btn-fab-extended">
  📝 Nuevo
</button>

Botones con Iconos



<button class="btn btn-primary btn-icon">
  <i class="icon icon-left">📧</i>
  Enviar Email
</button>

<button class="btn btn-success btn-icon">
  Descargar
  <i class="icon icon-right">⬇️</i>
</button>

<button class="btn btn-info btn-icon btn-icon-only">
  <i class="icon">⚙️</i>
</button>

Grupos de Botones

Grupo Moderno (con espaciado)

Grupo Conectado

<!-- Grupo con espaciado -->
<div class="btn-group-modern">
  <button class="btn btn-primary">Izquierda</button>
  <button class="btn btn-primary">Centro</button>
  <button class="btn btn-primary">Derecha</button>
</div>

<!-- Grupo conectado -->
<div class="btn-group-modern btn-group-connected">
  <button class="btn btn-outline-primary">Izquierda</button>
  <button class="btn btn-outline-primary">Centro</button>
  <button class="btn btn-outline-primary">Derecha</button>
</div>

Estados de Botones

Estados Básicos




Estado de Carga


<button class="btn btn-primary btn-loading">Cargando...</button>

Interacciones

🎯 Efectos Interactivos

  • Hover: Elevación con translateY(-1px) y box-shadow mejorado
  • Active: Vuelta a la posición original translateY(0)
  • Focus: Focus ring visible para accesibilidad
  • Disabled: Opacidad reducida, sin efectos de hover/active

Ejemplos de Uso

Formulario de Contacto

Panel de Acciones

Toolbar Completo

💡 Consejos de Uso

  • Botones primarios: Usa .btn-primary o .btn-glow para acciones principales
  • Botones secundarios: .btn-ghost o .btn-glass para acciones secundarias
  • Acciones destructivas: .btn-danger para eliminar o deshacer
  • Estados especiales: .btn-loading durante procesamiento
  • FAB: Para acciones rápidas flotantes en mobile
  • Grupos: Para acciones relacionadas
En esta página