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:

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

 

15% OFF

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.

Ainda não tem um www

Botão do Boostrap Básico

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

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:

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:

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:

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:

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:

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:

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:

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:

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:

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 Web especialista em Front End apaixonado por tecnologia! www.instagram.com/rm.developer/ linkedin.com/in/rafamarquesrmb/

Deixe uma resposta

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

hhchat