Saltar al contenido principal Saltar a la navegación de documentos
Check
in English

Botones

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

html 
<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">Link</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úrese de que la información indicada por el color sea obvia a partir del contenido en sí (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la .visually-hiddenclase.

Deshabilitar ajuste de texto

Si no desea que el texto del botón se ajuste, puede agregar la .text-nowrapclase al botón. En Sass, puede configurar $btn-white-space: nowrappara deshabilitar el ajuste de texto para cada botón.

Etiquetas de botón

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

Cuando se utilizan clases de botón en <a>elementos que se utilizan para activar la funcionalidad en la página (como el contenido colapsado), en lugar de vincular a nuevas páginas o secciones dentro de la página actual, estos vínculos deben tener una role="button"adecuada para transmitir su propósito a las tecnologías de asistencia como lectores de pantalla

Enlace
html 
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</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">

Botones de contorno

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

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

Tallas

¿Te apetece botones más grandes o más pequeños? Añadir .btn-lgo .btn-smpara tamaños adicionales.

html 
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
html 
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Incluso puede rodar su propio tamaño personalizado con variables CSS:

html 
<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

Estado deshabilitado

Haga que los botones parezcan inactivos agregando el disabledatributo booleano a cualquier <button>elemento. Se han aplicado botones deshabilitados pointer-events: none, lo que evita que se activen los estados activos y de desplazamiento.

html 
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

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

  • <a>s no admite el disabledatributo, por lo que debe agregar la .disabledclase para que aparezca visualmente deshabilitada.
  • Se incluyen algunos estilos amigables para el futuro para deshabilitar todos pointer-eventslos botones de anclaje.
  • El uso de botones deshabilitados <a>debe incluir el aria-disabled="true"atributo para indicar el estado del elemento a las tecnologías de asistencia.
  • El uso de botones deshabilitados <a> no debe incluir el hrefatributo.
Enlace principal Enlace
html 
<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

Para cubrir los casos en los que debe mantener el hrefatributo en un enlace deshabilitado, la .disabledclase usa pointer-events: nonepara intentar deshabilitar la funcionalidad de enlace de <a>s. Tenga 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 compatibles 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 incluya un tabindex="-1"atributo en estos enlaces para evitar que reciban el foco del teclado y use JavaScript personalizado para deshabilitar su funcionalidad por completo.

Enlace principal Enlace
html 
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Botones de bloque

Cree pilas receptivas 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.

html 
<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Aquí creamos una variación receptiva, comenzando con botones apilados verticalmente hasta el mdpunto de interrupción, donde .d-md-blockreemplaza la .d-gridclase, anulando así la gap-2utilidad. Cambia el tamaño de tu navegador para verlos cambiar.

html 
<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

Puede ajustar el ancho de sus botones de bloque con clases de ancho de columna de cuadrícula. Por ejemplo, para un "botón de bloque" de ancho medio, use .col-6. Céntralo horizontalmente con .mx-auto, también.

html 
<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</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 de respuesta anterior y agregamos algunas utilidades flexibles y una utilidad de margen en el botón para alinear a la derecha los botones cuando ya no están apilados.

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

Complemento de botón

El complemento de botón le permite crear botones simples de encendido/apagado.

Visualmente, estos botones de alternancia son idénticos a los botones de alternancia de las casillas 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" (ya 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é 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.

Alternar estados

Agregar data-bs-toggle="button"para alternar el activeestado de un botón. Si está alternando previamente un botón, debe agregar manualmente la .activeclase y aria-pressed="true" asegurarse de que se transmita de manera adecuada a las tecnologías de asistencia.

html 
<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
Alternar enlace Enlace de alternancia activo Enlace de alternancia deshabilitado
html 
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

Métodos

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

const bsButton = new bootstrap.Button('#myButton')
Método Descripción
dispose Destruye el botón de un elemento. (Elimina los datos almacenados en el elemento DOM)
getInstance Método estático que le permite obtener la instancia del botón asociada a un elemento DOM, puede 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).
toggle Cambia el estado de inserción. Da al botón la apariencia de que ha sido activado.

Por ejemplo, para alternar todos los botones

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS

Variables

Añadido en v5.2.0

Como parte del enfoque de variables CSS en evolución de Bootstrap, los botones ahora usan variables CSS locales .btnpara mejorar la personalización en tiempo real. Los valores para las variables CSS se establecen a través de Sass, por lo que también se admite la personalización de Sass.

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Cada .btn-*clase de modificador actualiza las variables CSS apropiadas para minimizar las reglas CSS adicionales con nuestros button-variant(), button-outline-variant()y button-size()mixins.

Este es un ejemplo de creación de una .btn-*clase de modificador personalizada como lo hacemos para los botones exclusivos de nuestros documentos al reasignar las variables CSS de Bootstrap con una combinación de nuestras propias variables CSS y Sass.

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

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:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}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%;

mezclas descaradas

Hay tres combinaciones para botones: botón y combinación de variantes de contorno de botón (ambas basadas en $theme-colors), más una combinación 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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-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)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Bucles descarados

Las variantes de botones (para botones regulares y de contorno) usan sus respectivos mixins con nuestro $theme-colorsmapa para generar las clases de modificadores en scss/_buttons.scss.

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

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