Botão Bootstrap: Exemplos e modelos de botão para seu site

O Botão Bootstrap é um elemento muito utilizado nas páginas feitas em Bootstrap. Contudo, antes disso é necessário saber como utilizar e instalar o Bootstrap.  Você pode estar utilizando o template inicial recomendado pelo próprio site do Bootstrap:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <!-- Meta tags Obrigatórias -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Olá, mundo!</title>
  </head>
  <body>
    <h1>Olá, mundo!</h1>

    <!-- JavaScript (Opcional) -->
    <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Enfim, tendo instalado o Bootstrap, podemos então prosseguir para os assuntos sobre o botão Bootstrap. Neste artigo veremos:

O que é um Botão Bootstrap

Os botões Bootstrap são botões personalizados, com suporte a tamanhos, estilos e muito mais. Portanto, são utilizados dentro de formulários, diálogos ou outras coisas.

O Bootstrap possui vários estilos de botões pré-definidos para diversos propósitos, além de outros recursos extras para mais controle.

A classe .btn

A classe .btn é a classe que define um botão no Bootstrap. Originalmente, criado para ser utilizado junto ao elemento <button>. Porém, é possível utilizar com outros elementos, como os links <a> e os inputs <input>.

Quando usando classes de botão em elementos link <a> que funcionam como gatilhos in-page (igual aos conteúdos colapsáveis), estas âncoras devem receber o atributo role=”button” para indicar seu propósito a tecnologias assistivas, como navegadores.

Botão do Boostrap Básico

Vamos verificar o código abaixo contendo exemplos simples de botões do Bootstrap:

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

Com isso, obtemos então o resultado dos botões abaixo:

Botões Bootstrap

Observe também, que além da classe .btn, foi utilizado uma segunda classe, que é a classe que define o estilo e cor do botão Bootstrap.

As cores são definidas baseados em padrões de tecnologia assistida. Porém, podemos usar quaisquer uma delas para qualquer objetivo.

Vamos ver  agora o exemplo abaixo usando o botão Bootstrap dentro da tag link e das tags inputs:

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Botão</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">

O resultado do exemplo acima será então:


Botões Outline

Caso queira utilizar o botação só que sem uma cor de fundo, é possível então utilizar as classes originais acrescentando .btn-outline-

. Segue o exemplo conforme o código abaixo:

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

Desta forma, temos então o seguinte resultado:


Tamanhos do Botão Bootstrap

O Botão Bootstrap também permite a estilização do seu tamanho, podendo ser um tamanho maior ou menor que o original.

Para os botões ficarem maiores, é necessário utilizar a classe btn.lg, já para os botões menores, utiliza-se a classe btn-sm.

Vejamos então os exemplos abaixo:

<button type="button" class="btn btn-primary btn-lg">Botão grande</button>
<button type="button" class="btn btn-primary">Botão normal</button>
<button type="button" class="btn btn-primary btn-sm">Botão pequeno</button>

Dessa forma, observe abaixo os diferentes tamanhos para o botão Bootstrap:

Podemos ainda criar um botão que ocupe um bloco inteiro do tamanho do elemento pai, os btn-block:

<div style="width: 500px;">
    <button type="button" class="btn btn-primary btn-lg btn-block">Botão block-level</button>
</div>

Observe que no exemplo anterior, delimitamos uma largura de 500px para a div pai. Portanto, dessa forma, nosso botão terá o mesmo comprimento conforme a imagem abaixo:

Botão Bootstrap fulllsize

Estado Ativo e Desativo

Os botões também podem receber um estado de ativado ou de desativado.

Quando ativados, ou seja, pressionado, significa que eles estão ativados. No caso do elemento <button>, não é necessário usar essa classe, pois, a mesma já possui uma pseudo-classe que realiza essa operação. Já para outros elementos, você pode forçar essa aparência incluindo a classe .active ou o atributo aria-pressed=”true”.

Vejamos então o exemplo abaixo:

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Link primário</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

O resultado será conforme a imagem posterior:

Já para desativar um botão utilize o atributo disabled em qualquer elemento <button>. O Elemento <a> não suporta este atributo, portanto, é necessário utilizar a c.asse disabled. Dessa forma, vejamos o exemplo abaixo:

<button type="button" class="btn btn-lg btn-primary" disabled>Botão primário</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Botão</button>
<br><br>
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link primário</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

Portanto, teremos então o seguinte resultado:


CheckBox e Radios

Também é possível utilizar um botão Bootstrap para checkbox e para radios. Vejamos o exemplo abaixo para checkbox:

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checado
  </label>
</div>

Dessa forma, observe então que a classe btn foi colocada dentro do label, e não no input.

Com isso, temos o resultado como na imagem abaixo:

checkbox Botao Bootstrap

Vejamos então para o caso de um grupo de inputs do tipo radio:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Ativo
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Com isso, teremos então o exemplo da imagem a seguir:


Botão DropDown

Você também pode estar criando botões do tipo dropdown no boostrap.

Vejamos o exemplo abaixo:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Botão dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Alguma ação</a>
    <a class="dropdown-item" href="#">Outra ação</a>
    <a class="dropdown-item" href="#">Alguma coisa aqui</a>
  </div>
</div>

Dessa forma, o resultado será como nas imagens abaixo:

Botao boostrap dropdown

Posteriormente, quando selecionado, aparece a lista dropdown:

Botao boostrap dropdown

Você pode estar explorando mais sobre os dropdowns, na documentação oficial do Bootstrap.

Este artigo foi útil?

Obrigado pela resposta!
Picture of Rafael Marques

Rafael Marques

Especialista em Desenvolvimento Web e Marketing. É apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, além de atuar como Desenvolvedor Fullstack e redator técnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estimação.

Contato: rafael.blog@homehost.com.br

Ganhe 30% OFF

Indique seu nome e e-mail,e ganhe um cupom de desconto de 30% para sempre na Homehost!