Botones Bootstrap5
Bootstrap 5 ofrece botones de diferentes estilos.
Ejemplo
<button type="button" class="btn">Botón básico</button>
<button type="button" class="btn btn-primary">Botón principal</button>
<button type="button" class="btn btn-secondary">Botón secundario</button>
<button type="button" class="btn btn-success">Éxito</button>
<button type="button" class="btn btn-info">Información</button>
<button type="button" class="btn btn-warning">Advertencia</button>
<button type="button" class="btn btn-danger">Peligro</button>
<button type="button" class="btn btn-dark">Oscuro</button>
<button type="button" class="btn btn-light">Claro</button>
<button type="button" class="btn btn-link">Enlace</button>
Pruébalo »
Las clases de botón se pueden usar en<a>, <button>, o<input>elementos:
Ejemplo
<a href="#" class="btn btn-info" role="button">Botón de enlace</a>
<button type="button" class="btn btn-info">Botón</button>
<input type="button" class="btn btn-info" value="Botón de entrada">
<input type="submit" class="btn btn-info" value="Botón de envío">
<input type="reset" class="btn btn-info" value="Botón de reinicio">
Pruébalo »
Botones con borde
Bootstrap 5 también permite configurar botones con bordes. Al pasar el ratón sobre el botón se añade un efecto de resaltado:
Ejemplo
<button type="button" class="btn btn-outline-primary">Botón principal</button>
<button type="button" class="btn btn-outline-secondary">Botón secundario</button>
<button type="button" class="btn btn-outline-success">Éxito</button>
<button type="button" class="btn btn-outline-info">Información</button>
<button type="button" class="btn btn-outline-warning">Advertencia</button>
<button type="button" class="btn btn-outline-danger">Peligro</button>
<button type="button" class="btn btn-outline-dark">Oscuro</button>
<button type="button" class="btn btn-outline-light text-dark">Claro</button>
Pruébalo »
Botones de diferentes tamaños
Bootstrap 5 permite ajustar el tamaño de los botones usando la clase.btn-lgpara botones grandes, y la clase.btn-smpara botones pequeños:
Ejemplo
<button type="button" class="btn btn-primary btn-lg">Botón grande</button>
<button type="button" class="btn btn-primary">Botón predeterminado</button>
<button type="button" class="btn btn-primary btn-sm">Botón pequeño</button>
Pruébalo »
Botones de bloque
Al añadir la clase.btn-blockse pueden configurar botones de bloque;.d-gridla clase se coloca en el elemento padre:
Ejemplo
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">Botón 1</button>
</div>
Pruébalo »
Si hay varios botones de bloque, puedes usar la clase.gap-*para configurarlos:
Ejemplo
<div class="d-grid gap-3">
<button type="button" class="btn btn-primary btn-block">Botón de ancho 100%</button>
<button type="button" class="btn btn-primary btn-block">Botón de ancho 100%</button>
<button type="button" class="btn btn-primary btn-block">Botón de ancho 100%</button>
</div>
Pruébalo »
Botones activos y deshabilitados
Los botones se pueden configurar como activos o deshabilitados.
.activeLa clase puede configurar el botón como activo,disabledEl atributo `disabled` puede configurar el botón como no clicable.
Nota: el elemento <a> no admite el atributo `disabled`; puedes agregar.disabledla clase para deshabilitar el clic en los enlaces.
Ejemplo
<button type="button" class="btn btn-primary active">Botón activo</button>
<button type="button" class="btn btn-primary" disabled>Botón deshabilitado</button>
<a href="#" class="btn btn-primary disabled">Enlace deshabilitado</a>
Pruébalo »
Botón de carga
También podemos configurar un botón en estado de carga.
Ejemplo
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
Pruébalo »
Otras extensiones