JS Botão (button.js)
Usar este plugin se você quiser ter mais controle sobre seus botões.
Para um tutorial sobre Botões, leia o nosso Bootstrap Botões Tutorial .
As Classes Botão Plugin
As classes abaixo pode ser usado para denominar qualquer <a>, <button> , ou <input> elemento:
| Classe | Descrição | Exemplo |
|---|---|---|
| .btn | Adiciona um estilo básico para qualquer botão | Tente |
| .btn-default | Indica um botão default / padrão | Tente |
| .btn-primary | Fornece peso extra visual e identifica a ação primária em um conjunto de botões | Tente |
| .btn-success | Indica uma ação bem-sucedida ou positivo | Tente |
| .btn-info | botão contextual para mensagens de alerta informativo | Tente |
| .btn-warning | Indica que o cuidado deve ser tomado com esta ação | Tente |
| .btn-danger | Indica uma ação perigosa ou potencialmente negativo | Tente |
| .btn-link | Faz um botão parecido com um link (ainda terá comportamento do botão) | Tente |
| .btn-lg | Faz um grande botão | Tente |
| .btn-sm | Faz um pequeno botão | Tente |
| .btn-xs | Faz um botão extra pequeno | Tente |
| .btn-block | Faz um botão em nível de bloco (se estende por toda a largura do elemento pai) | Tente |
| .active | Faz o botão aparece pressionado | Tente |
| .disabled | Faz o botão desativada | Tente |
via JavaScript
Habilitar manualmente com:
$('.btn').button();
Opções de botão
| None |
Métodos de botão
A tabela a seguir lista os métodos botão Todos os disponíveis.
Nota: Para este plugin, métodos também podem ser passadas através de atributos de dados; acrescentar o nome do método para de dados, como em dados de alternância ou de carregamento de dados.
| Método | Descrição | Tente |
|---|---|---|
| .button("toggle") | Faz com que o botão do olhar pressionado | Tente |
| .button("loading") | Desativa o botão e muda o botão de texto para "loading ..." | Tente |
| .button("reset") | Altera o botão de texto para texto original (se alterado) | Tente |
| .button("string") | Especifica um novo texto do botão | Tente |
Exemplos
Usando CSS para personalizar os botões
Como remover as bordas arredondadas:
Como adicionar uma cor específica:
Exemplo
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
} Tente você mesmo " Como adicionar sombras: