Botões

Como os botões funcionam no Locaweb Style

Primary Default Dark Danger Primary Danger

1
2
3
4
5
<a href="#" class="ls-btn-primary">Primary</a>
<a href="#" class="ls-btn">Default</a>
<a href="#" class="ls-btn-dark">Dark</a>
<a href="#" class="ls-btn-danger">Danger</a>
<a href="#" class="ls-btn-primary-danger">Primary Danger</a>

Criando botões

Teoricamente você pode dar o visual de botão para qualquer elemento, mas geralmente os elementos <a>, <button> e <input> serão os mais utilizados e também é o que aconselhamos.

Basta aplicar a classe ls-btn em um desses elementos e pronto.

Link

1
2
3
<a href="#" class="ls-btn">Link</a>
<button type="button" value="teste" class="ls-btn">Button</button>
<input type="submit" value="input" class="ls-btn">

Alterando o tamanho

Para alterar o tamanho dos botões, basta incluir as classes abaixo:

Nome	Resultado
ls-btn-lg	Grande
ls-btn (tamanho default)	Normal
ls-btn-sm	Pequeno
ls-btn-xs	Bem pequeno

1
2
3
4
5
6
7
8
9
10
11
<!-- ls-btn-lg -->
<a href="#" class="ls-btn-primary ls-btn-lg">Grande</a>

<!-- ls-btn -->
<a href="#" class="ls-btn-primary">normal</a>

<!-- ls-btn-sm -->
<a href="#" class="ls-btn-primary ls-btn-sm">Pequeno</a>

<!-- ls-btn-xs -->
<a href="#" class="ls-btn-primary ls-btn-xs">Bem pequeno</a>

Botões blocados

As vezes usamos botões que precisam ocupar todo o espaço disponível, para fazer isso use a classe .ls-btn-block. Isso aplicará um display: block; ao botão, dando uma largura de 100%.

1
<button type="button" class="ls-btn ls-btn-lg ls-btn-block">Botão em forma de bloco</button>

Botões desativados

Para desabilitar um botão, basta inserir o atributo [disabled] que os browsers cuidarão do resto. Também funciona se você inserir a classe .ls-disabled

Primary

1
2
3
4
5
<a href="#" class="ls-btn-primary" disabled="disabled">Primary</a>
<input type="button" value="Default" disabled class="ls-btn">
<button class="ls-btn-dark ls-disabled">Dark</button>
<button class="ls-btn-danger ls-disabled">Danger</button>
<button class="ls-btn-primary-danger ls-disabled">Primary Danger</button>

Botões com ícones

Escolha uma classe de ícone do Locastyle e adicione no botão, simple like that. Veja exemplos abaixo:

Adicionar usuário

1
2
3
4
5
<a href="#" class="ls-btn-primary ls-ico-user">Adicionar usuário</a>
<button class="ls-btn-dark ls-ico-chevron-left">Anterior</button>
<button class="ls-btn ls-ico-cog">Configurações</button>
<button class="ls-btn-danger ls-ico-dashboard">Consumo limite</button>
<button class="ls-btn-primary-danger ls-ico-remove">Remover</button>

Botões com ícones sem texto

1
2
3
4
5
<a href="#" class="ls-btn-primary ls-ico-user"></a>
<button class="ls-btn-dark ls-ico-chevron-left"></button>
<button class="ls-btn ls-ico-cog"></button>
<button class="ls-btn-danger ls-ico-dashboard"></button>
<button class="ls-btn-primary-danger ls-ico-remove"></button>

Grupo de botões

Os grupos de botões são botões dentro de um elemento .ls-group-btn.

1
2
3
4
5
<div class="ls-group-btn">
  <button type="button" class="ls-btn">Botão 1</button>
  <button type="button" class="ls-btn">Botão 2</button>
  <button type="button" class="ls-btn">Botão 3</button>
</div>

Botões Ativados/Desativados

Adicionamos uma chave para ativar/desativar o grupo de botões, para usá-la adicione a classe .ls-group-active no mesmo elemento com .ls-group-btn.

1
2
3
4
5
<div class="ls-group-btn ls-group-active">
  <button type="button" class="ls-btn-primary ls-active">Botão 1</button>
  <button type="button" class="ls-btn-primary">Botão 2</button>
  <button type="button" class="ls-btn-primary">Botão 3</button>
</div>

Documentação