Fundação Botão
Estilo do botão
Fundação oferece seis estilos de botão. .button
classe cria um botão azul, juntamente com estofamento. Cores diferentes para a classe botão: .secondary
, .success
, .info
, .warning
ou .alert
:
Exemplos
<Button type = "button" class = "button"> Padrão </ button>
<Tipo botão = "button" class = "botão secundário"> Secundária </ button>
<Button type = "button" class = "button sucesso"> sucesso </ button>
<Button type = "button" class = "info botão"> Info </ button>
<Button type = "button" class = "warning botão"> Aviso </ button>
<Button type = "button" class = "alert botão"> Alerta </ button>
<Tipo botão = "button" class = "botão secundário"> Secundária </ button>
<Button type = "button" class = "button sucesso"> sucesso </ button>
<Button type = "button" class = "info botão"> Info </ button>
<Button type = "button" class = "warning botão"> Aviso </ button>
<Button type = "button" class = "alert botão"> Alerta </ button>
tente »
classe Button pode ser usado em <a>
, <button>
ou <input>
elemento:
Exemplos
<A Href = "#" class = "button papel info" = "button"> Fazer a ligação Botão </ a>
<Button type = "button" class = "botão de informações"> Botão </ button>
<Input type = "button" class = "info botão" value = "botão de entrada">
<Input type = "submit" class = value "info botão" = "Botão Submit">
<Button type = "button" class = "botão de informações"> Botão </ button>
<Input type = "button" class = "info botão" value = "botão de entrada">
<Input type = "submit" class = value "info botão" = "Botão Submit">
tente »
Por que uma tag href para o #? Quando não quer saltar e clique no link para obter página "404", podemos definir uma tag href #. |
botão Tamanho
Podemos usar .large
, .small
ou .tiny
classe para definir o tamanho do botão:
Exemplos
<Tipo botão = "button" class = "grande botão"> Grande </ button>
<Button type = "button" class = "button"> Padrão </ button>
<Tipo botão = "button" class = "pequeno botão"> pequeno </ button>
<Tipo botão = "button" class = "pequeno botão"> minúsculo </ button>
<Button type = "button" class = "button"> Padrão </ button>
<Tipo botão = "button" class = "pequeno botão"> pequeno </ button>
<Tipo botão = "button" class = "pequeno botão"> minúsculo </ button>
tente »
botão arredondada
Você pode usar .radius
e .round
classe para definir o botão redondo:
Exemplos
<Button type = "button" class = "button"> Botão Padrão </ button>
<Button type = "button" class = "raio botão"> Radius Button </ button>
<Button type = "button" class = "botão redondo"> Botão redondo </ button>
<Button type = "button" class = "raio botão"> Radius Button </ button>
<Button type = "button" class = "botão redondo"> Botão redondo </ button>
tente »
extensão botão
Você pode usar .expand
classe para definir o botão para 100% banda larga:
Exemplos
<Button type = "button" class = "button"> Botão Padrão </ button>
<Button type = "button" class = "botão de expansão"> Button Expandida </ button>
<Button type = "button" class = "botão de expansão"> Button Expandida </ button>
tente »
botão Desabilitar
Você pode usar .disabled
classe para clique no botão Configurações não está disponível:
Exemplos
<Button type = "button" class = "button"> Botão Padrão </ button>
<Button type = "button" class = "botão desativado"> botão desativado </ button>
<Button type = "button" class = "botão desativado"> botão desativado </ button>
tente »