Buttons

Usa los estilos de botones personalizados de Bootstrap para acciones en formularios, cuadros de diálogo y más con soporte para múltiples tamaños, estados y más.

En esta página

Ejemplos

Bootstrap incluye varios estilos de botones predefinidos, cada uno con su propio propósito semántico, con algunos extras incluidos para un mayor control.

<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>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Enlace</button>

Transmitir significado a las tecnologías de asistencia

El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrate de que la información denotada por el color sea obvia a partir del contenido mismo (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Deshabilitar ajuste de texto

Si no deseas que el texto del botón se ajuste, puedes agregar la clase .text-nowrap al botón. En Sass, puedes configurar $btn-white-space: nowrap para deshabilitar el ajuste de texto para cada botón.

Etiquetas de botón

Las clases .btn están diseñadas para usarse con el elemento <button>. Sin embargo, también puedes usar estas clases en elementos <a> o <input> (aunque algunos navegadores pueden aplicar una representación ligeramente diferente).

Al usar clases de botón en elementos <a> que se usan para activar alguna funcionalidad en la página (como colapsar contenido), en lugar de vincular a nuevas páginas o secciones dentro de la página actual, estos enlaces deben recibir un role="button " para transmitir adecuadamente su propósito a las tecnologías de asistencia, como los lectores de pantalla.

Enlace

<a class="btn btn-primary" href="#" role="button">Enlace</a>
<button class="btn btn-primary" type="submit">Botón</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Tal vez te interese

¿Cuál es el mejor Web Hosting?

Botones de contorno

¿Necesitas un botón, pero no los fuertes colores de fondo que traen? Reemplaza las clases de modificador predeterminadas con .btn-outline-* para eliminar todas las imágenes y colores de fondo en cualquier botón.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Algunos de los estilos de botones usan un color de primer plano relativamente claro y solo deben usarse sobre un fondo oscuro para tener suficiente contraste.

Tamaños

¿Te apetece botones más grandes o más pequeños? Agrega .btn-lg o .btn-sm para tamaños adicionales.

<button type="button" class="btn btn-primary btn-lg">Botón grande</button>
<button type="button" class="btn btn-secondary btn-lg">Botón grande</button>

<button type="button" class="btn btn-primary btn-sm">Botón pequeño</button>
<button type="button" class="btn btn-secondary btn-sm">Botón pequeño</button>

Estado deshabilitado

Haz que los botones parezcan inactivos agregando el atributo booleano disabled a cualquier elemento <button>. Los botones deshabilitados tienen pointer-events: none aplicado, lo que evita que se activen los estados active y hover.

Make buttons look inactive by adding the disabled boolean attribute to any <button> element. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.

<button type="button" class="btn btn-lg btn-primary" disabled>Botón primary</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Botón</button>

Los botones deshabilitados que usan el elemento <a> se comportan un poco diferente:

Los <a>s no admiten el atributo disabled, por lo que debes agregar la clase .disabled para que aparezca visualmente deshabilitado.
Se incluyen algunos estilos amigables (para el futuro) para deshabilitar todos los pointer-events en los botones de <a>s.
Los botones deshabilitados que usan <a> deben incluir el atributo aria-disabled="true" para indicar el estado del elemento a las tecnologías de asistencia.
Los botones deshabilitados que usan <a> no deben incluir el atributo href.

Enlace primary Enlace

<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Enlace primary</a>
<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Enlace</a>

Advertencia de funcionalidad de enlace

Para cubrir los casos en los que debes mantener el atributo href en un enlace deshabilitado, la clase .disabled usa pointer-events: none para intentar deshabilitar la funcionalidad del enlace de <a>s. Ten en cuenta que esta propiedad CSS aún no está estandarizada para HTML, pero todos los navegadores modernos la admiten. Además, incluso en los navegadores que admiten pointer-events: none, la navegación con el teclado no se ve afectada, lo que significa que los usuarios de teclados videntes y los usuarios de tecnologías de asistencia aún podrán activar estos enlaces. Entonces, para estar seguro, además de aria-disabled="true", también incluye un atributo tabindex="-1" en estos enlaces para evitar que reciban el foco del teclado, y usa JavaScript personalizado para deshabilitar tu funcionalidad por completo .

Enlace primary Enlace

<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Enlace primary</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Enlace</a>

Botones de bloque

Crea pilas responsive de “botones de bloque” de ancho completo como los de Bootstrap 4 con una combinación de nuestras utilidades de visualización y espacios. Al usar utilidades en lugar de clases específicas de botones, tenemos un control mucho mayor sobre el espaciado, la alineación y los comportamientos de respuesta.

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Botón</button>
  <button class="btn btn-primary" type="button">Botón</button>
</div>

Aquí creamos una variación responsive, comenzando con botones apilados verticalmente hasta el breakpoint md, donde .d-md-block reemplaza a la clase .d-grid, sobrescribiendo así la utilidad gap-2. Cambia el tamaño de tu navegador para verlos cambiar.

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Botón</button>
  <button class="btn btn-primary" type="button">Botón</button>
</div>

Puedes ajustar el ancho de tus botones de bloque con clases de ancho de columna de cuadrícula. Por ejemplo, para un “botón de bloque” de ancho medio, usa .col-6. Céntralo horizontalmente con .mx-auto, también.

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Botón</button>
  <button class="btn btn-primary" type="button">Botón</button>
</div>

Se pueden usar utilidades adicionales para ajustar la alineación de los botones cuando están en posición horizontal. Aquí tomamos nuestro ejemplo responsive anterior y agregamos algunas utilidades flex y una utilidad de margen en el botón para alinear a la derecha los botones cuando ya no están apilados.

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Botón</button>
  <button class="btn btn-primary" type="button">Botón</button>
</div>

Tal vez te interese

¿Cuál es el mejor Web Hosting?

Complemento de botón

El complemento de botón te permite crear botones simples de encender/apagar.

Visualmente, estos botones toggle son idénticos a los botones de alternancia de casilla de verificación. Sin embargo, las tecnologías de asistencia los transmiten de manera diferente: los lectores de pantalla anunciarán las casillas de verificación como “marcadas”/“no marcadas” (dado que, a pesar de su apariencia, siguen siendo fundamentalmente casillas de verificación), mientras que estos botones de alternancia se anunciarán como “botón”/“botón presionado”. La elección entre estos dos enfoques dependerá del tipo de alternancia que estés creando y de si la alternancia tendrá o no sentido para los usuarios cuando se anuncie como una casilla de verificación o como un botón real.

Estados toggle

Agrega data-bs-toggle="button" para alternar el estado active de un botón. Si estás alternando previamente un botón, debes agregar manualmente la clase .active y aria-pressed="true" para asegurarte de que se transmita de manera adecuada a las tecnologías de asistencia.

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Botón toggle</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Botón toggle activo</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Botón toggle deshabilitado</button>

Enlace toggle Enlace toggle activo Enlace toggle deshabilitado

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Enlace toggle</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Enlace toggle activo</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Enlace toggle deshabilitado</a>

Métodos

Puedes crear una instancia de botón con el constructor de botones, por ejemplo:

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

Método	Descripción
`toggle`	Cambia el estado del botón. Da al botón la apariencia de que ha sido activado.
`dispose`	Destruye el botón de un elemento. (Elimina los datos almacenados en el elemento DOM)
`getInstance`	Método estático que te permite obtener la instancia del botón asociada a un elemento DOM, puedes usarlo así: `bootstrap.Button.getInstance(element)`
`getOrCreateInstance`	Método estático que devuelve una instancia de botón asociada a un elemento DOM o crea una nueva en caso de que no se haya inicializado. Puedes usarlo así: `bootstrap.Button.getOrCreateInstance(element)`

Por ejemplo, para alternar todos los botones

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

Sass

Variables

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              $link-color;
$btn-link-hover-color:        $link-hover-color;
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Mixins

Hay tres mixins para botones: mixins de botón y mixins de variante de contorno de botón (ambos basados en $theme-colors), más un mixin de tamaño de botón.

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $disabled-border;
  }
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

Tal vez te interese

¿Cuál es el mejor Web Hosting?

Loops

Las variantes de botón (para botones regulares y de contorno) usan sus respectivos mixins con nuestro mapa $theme-colors para generar las clases modificadoras en scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}