O HTML tem o input type button que é um botão mas não dá pra comparar ele com um onde aplicamos o estilo do
bootstrap.
Veja Só: e
É por isso e por ser muito pequeno Bootstrap é tão usado.
Note que o Boostrap é mobile first, ou sejam tudo nele foi feito para ser exibido num celular e é mais um motivo para usar ele nos nossos sites.
É o botão típico do Bootstrap. É feio que dói mas já é melhor que o default do browser. Como usar :
<button type="button" class="btn">Botão Básico</button>
Para mim nem parece um botão.
Como é exibido :
A classe .btn-block faz o bloco do botão esticar até ocupar a largura do elemento parente que, no caso
que exibo abaixo, será o de uma linha inteira.
Passe o mouse sobre ele e veja um efeito digno do BootStrap.
Contexto significa com personalidade, ou seja, cores padrão que normalmente indicam sucesso, falha, cuidado indicando ao usuário uma condição típica do uso do botão :
•1- Basic : é o mais sem graça e é muito próximo do iput type button do html
•1- Primary : Dá um estilo azulado ao botão :
•2- Secondary: Dá uma cor cinza sem graça mas muito usada em sites muito formais.
•3- Success : Faz a cor de fundo do botão ficar verde. Verde num semáforo indica ir em frente.
•4- Info : info coloca a cor de fundo em azul claro e, ao meu ver, é o botão mais bonito.
•5- Warning : Coloca a cor de fundo do botão em amarelo indicando para o usuário tomar atenção porque está fazendo uma opção importante.
•6- Danger : Coloque o fundo do botão em vermelho o que avisa ao usuário para clicar só se tiver certeza.
•7- Dark : Faz o fundo do botão ficar com a cor preta e só fica legal num site de músicos ou programadores malucos obcecados pela cor preta.
•8- Light : Faz o fundo do botão ficar com a cor branca o que torna o botão praticamente invisível se o fundo da tela for branco. É muito usado junto com o botão dark em sites de músicos ou que usam temas escuros.
•9- Link : Este estilo faz o botão parecer um link sem o sublinhado em baixo ('text-decoration=none').
Veja como usar :
<button type="button" class="btn btn-primary">Primary</button>
Para alterar a cor mude a classe btn-primary para a outra que deseja (Basic,Primary,Secondary,Success,Info,
Warning,Danger,Dark, Light, Link).
Como a gente diz, se não for para causar a gente nem vai. A classe .btn-lg é usada
para tornar o botão grandes que até os mais distraídos ou velhinhos que estão usando o celular e esqueceram os
óculos em casa vão achar o botão.
Para alterar a cor mude a classe btn-primary para a outra que deseja(Basic,Primary,Secondary,Success,Info,
Warning,Danger,Dark, Light, Link).
Como usar :
<button type="button" class="btn btn-primary btn-lg">Botão grande Primary</button>
Como é exibido :
Esse é o contrário de cima...exibe os botões pequenos. A classe btn-sm faz isso
Como usar :
<button type="button" class="btn btn-primary btn-sm">Botão pequeno Primary</button>
Como é exibido :
Este recurso desativa o botão que fica com uma cor pálida perto do com a cor normal. Contudo não é uma classe mas sim o par Disabled que provoca esse efeito. Veja a seguir 2 botões com a classe primary,o segundo com o parâmetro disabled. Graças a isso podemos pelo JavaScript atualizar o parâmetro disabled e ativar o botão.
Como usar :
<button type="button" class="btn btn-primary">Botão Primary comum</button>
<button type="button" class="btn btn-primary disabled">Botão Primary desabilitado</button>
Como é exibido :
Nota : No exemplo acima utilizei as classe Primary e Default para destacar as diferenças na exibição de ambos. Contudo podemos usar as outras classes de botões (Primary, Secondary, Info, Success, warning, danger, light e link)
Este efeito mistura um botão com um check-button, ou seja, ele tem uma aparência se NÃO for clicado, outra se for clicado, explicando melhor, clicando nele temos um padrão e clicando na página, fora do botão, removemos a sua seleção .
Como usar :
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
Botão de alternância
</button>
Como é exibido :
A única coisa que achei péssima nesse botão é como o usuário vai descobrir que clicando fora do botão remove a seleção dele ? Só se você falar para ele.
Ao meu ver acho este estilo o mais bonito contudo tem que ser usado corretamente pois pode deixar o botão pouco visível dependendo do fundo ou da tela do browser.
Use a classe .btn-outline-* cria botões delineados e podem ser contextualizados :
Como usar :
<button type="button" class="btn btn-outline-primary">Primary</button>
Como é exibido :
Passe o mouse sobre eles e veja o efeito muito bom...a cor de fundo do botão muda para a cor da borda do botão.
As classes .btn-toolbar e btn-group combinam um conjunto de botões agrupados em uma barra de ferramentas.
Como usar :A classe .active faz o botão parecer pressionado ou quando o mouse passa por ele:
Como usar :
<button type="button" class="btn btn-primary active">Botão Primary ativo</button>
Como é exibido :
Nota : No exemplo acima utilizei as classes Primary e Info mas podemos usar as outras classes de botões (Default, Secondary, Success, warning, danger, light e link)
Notas : btn-group e .btn-toolbar ficaram de fora porque não são simplesmente botões mas sim BootStrap + javaScript.