Ir ao contido principal Ir á navegación de documentos
Check
in English

Botóns

Use os estilos de botón personalizados de Bootstrap para accións en formularios, diálogos e moito máis con compatibilidade con varios tamaños, estados e moito máis.

Nesta páxina

Exemplos

Bootstrap inclúe varios estilos de botóns predefinidos, cada un cumprindo o seu propio propósito semántico, con algúns extras para un maior 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 ás tecnoloxías de asistencia

Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .visually-hiddenclase.

Desactiva o ajuste de texto

Se non queres que o texto do botón se axuste, podes engadir a .text-nowrapclase ao botón. En Sass, pode configurar $btn-white-space: nowrappara desactivar o ajuste de texto para cada botón.

Etiquetas de botón

As .btnclases están deseñadas para ser usadas co <button>elemento. Non obstante, tamén pode usar estas clases en <a>ou <input>elementos (aínda que algúns navegadores poden aplicar unha representación lixeiramente diferente).

Cando se usan clases de botóns en <a>elementos que se usan para activar a funcionalidade da páxina (como o contido en colapso), en lugar de enlazar con novas páxinas ou seccións dentro da páxina actual, estas ligazóns deberían ter unha role="button"función para transmitir adecuadamente o seu propósito ás tecnoloxías de asistencia, como lectores de pantalla.

Ligazón
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">

Botóns de esquema

Necesitas un botón, pero non as cores de fondo fortes que traen? Substitúe as clases de modificadores predeterminadas por .btn-outline-*aquelas para eliminar todas as imaxes e cores de fondo en calquera 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>
Algúns dos estilos de botóns usan unha cor de primeiro plano relativamente clara e só deben usarse nun fondo escuro para ter o suficiente contraste.

Tallas

Queres botóns máis grandes ou pequenos? Engadir .btn-lgou .btn-smpara tamaños adicionais.

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 podes tirar o teu 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 desactivado

Fai que os botóns parezan inactivos engadindo o disabledatributo booleano a calquera <button>elemento. Aplicáronse botóns desactivados pointer-events: nonepara evitar que se activen os estados activos e de paso.

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>

Os botóns desactivados que usan o <a>elemento compórtanse un pouco diferente:

  • <a>s non admiten o disabledatributo, polo que debes engadir a .disabledclase para que apareza visualmente desactivada.
  • Inclúense algúns estilos para o futuro para desactivar todos pointer-eventsos botóns de ancoraxe.
  • Os botóns desactivados que se usan <a>deben incluír o aria-disabled="true"atributo para indicar o estado do elemento ás tecnoloxías de asistencia.
  • Os botóns desactivados no uso <a> non deben incluír o hrefatributo.
Ligazón principal Ligazón
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 os casos nos que tes que manter o hrefatributo nunha ligazón desactivada, a .disabledclase usa pointer-events: nonepara tentar desactivar a función de ligazón de <a>s. Teña en conta que esta propiedade CSS aínda non está estandarizada para HTML, pero todos os navegadores modernos a admiten. Ademais, mesmo nos navegadores que admiten pointer-events: none, a navegación do teclado non se ve afectada, o que significa que os usuarios de teclado videntes e os usuarios de tecnoloxías de asistencia aínda poderán activar estas ligazóns. Polo tanto, para estar seguro, ademais de aria-disabled="true", inclúe tamén un tabindex="-1"atributo nestas ligazóns para evitar que reciban o foco do teclado e use JavaScript personalizado para desactivar a súa funcionalidade por completo.

Ligazón principal Ligazón
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>

Bloquear botóns

Crea pilas sensibles de "botóns de bloqueo" de ancho completo como os de Bootstrap 4 cunha mestura das nosas utilidades de visualización e espazos. Ao usar utilidades en lugar de clases específicas de botóns, temos un control moito maior sobre o espazo, o aliñamento e os comportamentos de resposta.

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 unha variación sensible, comezando con botóns apilados verticalmente ata o mdpunto de interrupción, onde .d-md-blocksubstitúe a .d-gridclase, anulando así a gap-2utilidade. Cambia o tamaño do teu navegador para velos 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>

Podes axustar o ancho dos teus botóns de bloque con clases de ancho de columna de grade. Por exemplo, para un "botón de bloqueo" de ancho medio, use .col-6. Céntrao horizontalmente con .mx-auto, tamé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>

Pódense usar utilidades adicionais para axustar o aliñamento dos botóns cando están en horizontal. Aquí tomamos o noso exemplo de resposta anterior e engadimos algunhas utilidades flexibles e unha utilidade de marxe no botón para aliñar os botóns á dereita cando xa non 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>

Plugin de botón

O complemento de botóns permítelle crear botóns de activación/desactivación sinxelos.

Visualmente, estes botóns de alternancia son idénticos aos botóns de alternancia da caixa de verificación . Non obstante, as tecnoloxías de asistencia transmítense de forma diferente: os lectores de pantalla anunciarán as opcións de caixa de verificación como "marcadas"/"non marcadas" (xa que, a pesar da súa aparencia, son fundamentalmente caixas de verificación), mentres que estes botóns de alternancia anunciaranse como "botón"/"botón presionado". A elección entre estes dous enfoques dependerá do tipo de alternador que estea a crear e de se a alternancia terá ou non sentido para os usuarios cando se anuncie como unha caixa de verificación ou como un botón real.

Alterna os estados

Engadir data-bs-toggle="button"para cambiar o estado dun botón active. Se estás a activar previamente un botón, debes engadir manualmente a .activeclase e aria-pressed="true" asegurarte de que se transmite adecuadamente ás tecnoloxí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 ligazón Ligazón de alternancia activa Desactivouse a ligazón de alternancia
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

Podes crear unha instancia de botón co construtor de botóns, por exemplo:

const bsButton = new bootstrap.Button('#myButton')
Método Descrición
dispose Destrúe o botón dun elemento. (Elimina os datos almacenados no elemento DOM)
getInstance Método estático que che permite obter a instancia do botón asociada a un elemento DOM, podes usalo así: bootstrap.Button.getInstance(element).
getOrCreateInstance Método estático que devolve unha instancia de botón asociada a un elemento DOM ou crea unha nova no caso de que non se inicializou. Podes usalo así: bootstrap.Button.getOrCreateInstance(element).
toggle Alterna o estado push. Dálle ao botón a aparencia de que foi activado.

Por exemplo, para alternar todos os botóns

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

CSS

Variables

Engadido na v5.2.0

Como parte do enfoque de variables CSS en evolución de Bootstrap, os botóns agora usan variables CSS locais activadas .btnpara mellorar a personalización en tempo real. Os valores para as variables CSS establécense a través de Sass, polo que a personalización de Sass tamén se admite.

  --#{$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 modificadora actualiza as variables CSS adecuadas para minimizar regras CSS adicionais cos nosos mixins button-variant(), button-outline-variant(), e .button-size()

Aquí tes un exemplo de construción dunha .btn-*clase modificadora personalizada como facemos para os botóns exclusivos dos nosos documentos reasignando as variables CSS de Bootstrap cunha mestura das nosas propias variables CSS e 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%)};
}

Variables Sass

$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%;

Sass mixins

Hai tres mixins para botóns: mixins de variantes de botón e contorno de botón (ambos baseados en $theme-colors), máis 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)
) {
  --#{$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};
}

Sass loops

As variantes de botón (para botóns regulares e de esquema) usan as súas respectivas mesturas co noso $theme-colorsmapa para xerar as clases modificadoras 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);
  }
}