Latest web development tutorials

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>

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">

tente »

nota 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>

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>

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>

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>

tente »