Botões Bootstrap 5

Estilo de Botão

Bootstrap 5 oferece diferentes estilos de botões:

Exemplo

<button type="button" class="btn">Básico</button>
<button type="button" class="btn btn-primary">Principal</button>
<button type="button" class="btn btn-secondary">Secundário</button>
<button type="button" class="btn btn-success">Sucesso</button>
<button type="button" class="btn btn-info">Informação</button>
<button type="button" class="btn btn-warning">Aviso</button>
<button type="button" class="btn btn-danger">Perigo</button>
<button type="button" class="btn btn-dark">Escuro</button>
<button type="button" class="btn btn-light">Claro</button>
<button type="button" class="btn btn-link">Link</button>

Experimente pessoalmente

A classe de botão pode ser usada para <a>e<button> ou <input> Elemento:

Exemplo

<a href="#" class="btn btn-success">Botão de Link</a>
<button type="button" class="btn btn-success">Botão</button>
<input type="button" class="btn btn-success" value="Botão de Entrada">
<input type="submit" class="btn btn-success" value="Botão de Submeter">
<input type="reset" class="btn btn-success" value="Botão de Reiniciar">

Experimente pessoalmente

Por que escrevemos um # no atributo href do link?

Como não temos nenhuma página para linkar e não queremos receber uma mensagem "404", usaremos # como link. Na vida real, ele deve ser o URL real da página de "pesquisa".

Contorno do botão

Bootstrap 5 também oferece oito botões de contorno/contorno.

Mova o mouse sobre eles para ver efeitos "hover" adicionais:

Exemplo

<button type="button" class="btn btn-outline-primary">Principal</button>
<button type="button" class="btn btn-outline-secondary">Secundário</button>
<button type="button" class="btn btn-outline-success">Sucesso</button>
<button type="button" class="btn btn-outline-info">Informação</button>
<button type="button" class="btn btn-outline-warning">Aviso</button>
<button type="button" class="btn btn-outline-danger">Perigo</button>
<button type="button" class="btn btn-outline-dark">Escuro</button>
<button type="button" class="btn btn-outline-light text-dark">Claro</button>

Experimente pessoalmente

Tamanho dos botões

para botões grandes .btn-lg Classe, para botões pequenos .btn-sm Classe:

Exemplo

<button type="button" class="btn btn-primary btn-lg">Grande</button>
<button type="button" class="btn btn-primary">Padrão</button>
<button type="button" class="btn btn-primary btn-sm">Pequeno</button>

Experimente pessoalmente

Botões de bloco

Para criar botões de bloco que ocupam toda a largura do elemento pai, use .d-grid Classe "helper":

Exemplo

<div class="d-grid">
  <button type="button" class="btn btn-primary btn-block">Botão de largura total</button>
</div>

Experimente pessoalmente

Se você tiver muitos botões bloco, você pode usar .gap-* A classe controla o espaçamento entre eles:

Exemplo

<div class="d-grid gap-3">
  <button type="button" class="btn btn-primary btn-block">Botão de largura total</button>
  <button type="button" class="btn btn-primary btn-block">Botão de largura total</button>
  <button type="button" class="btn btn-primary btn-block">Botão de largura total</button>
</div>

Experimente pessoalmente

Botão ativo/desativado

O botão pode ser configurado para o estado ativo (exibido como pressionado) ou desativado (não clicável):

a classe .active para exibir o botão como pressionado, enquanto disabled A propriedade torna o botão não clicável. Observe que o elemento <a> não suporta a propriedade disabled, portanto, é necessário usar .disabled A classe faz com que ele seja visualmente exibido como desativado.

Exemplo

<button type="button" class="btn btn-primary active">Primário Ativo</button>
<button type="button" class="btn btn-primary" disabled>Primário Desativado</button>
<a href="#" class="btn btn-primary disabled">Link Desativado</a>

Experimente pessoalmente

Botão de carregador

Você ainda pode adicionar "spinner" ao botão, e aprenderá mais sobre o nosso tutorial de BS5 Spinner:

Exemplo

<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>
  Carregando...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-border spinner-border-sm"></span>
  Carregando...
</button>
<button class="btn btn-primary" disabled>
  <span class="spinner-grow spinner-grow-sm"></span>
  Carregando...
</button>

Experimente pessoalmente