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.

Publicado por

Rafael Marques

Desenvolvedor e Escritor apaixonado por Tecnologia, Empreendedorismo e Educação.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

hhchat