Botões
Botões I
Cores Padrões
Principal, Secundaria, Infor, Alerta, Sucesso, Claro, Noturno (as 4 primeiras letras).
Cores
preto, branco, neutro, pedra, cinza, gold, amarelo, laranja, coral, vermelho, marron, marron, brown, olive, limão, verde, turqueza, cian, céu, teal, azul, índigo, navy, violeta, roxo, lilas, rosa, rose (as 4 primeiras letras).
Ex.: btn btn-lite B[cor]
<button type="button" class="btn btn-prin">Principal</button>
<button type="button" class="btn btn-secu">Secundaria</button>
<button type="button" class="btn btn-info">Infor</button>
<button type="button" class="btn btn-peri">Perigo</button>
<button type="button" class="btn btn-clar">Claro</button>
<button type="button" class="btn" disabled>Desabilitado</button>
<button type="button" class="btn btn-lite">Lite</button>
<button type="button" class="btn btn-lite Blila</button>
<button type="button" class="btn btn-lite Blima</button>
<button type="button" class="btn btn-lite Bverd12">Bverd12</button>
<button type="button" class="btn btn-lite Brosa10">Brosa10</button>
<button type="button" class="btn btn-lite Bmarr8">Bmarr8</button>
<button type="button" class="btn btn-lite Bpedr">Bpedr</button>
Tamanhos
Ex.: .btn-[p|m|g] - .btn-p | .btn-g
<button type="button" class="btn btn-prin btn-g">Grande principal</button>
<button type="button" class="btn btn-notu btn-g">Grande noturno</button>
<button type="button" class="btn btn-prin btn-p">Pequeno principal</button>
<button type="button" class="btn btn-secu disabled">secundario desab.</button>
<button type="button" class="btn btn-prin btn-g disabled">Grande desab.</button>
Btn Grupos
Ex.: .btn-group
<div class="btn-group" role="group">
<button type="button" class="btn btn-prin active">1</button>
<button type="button" class="btn btn-prin">2</button>
<button type="button" class="btn btn-prin">3</button>
<button type="button" class="btn btn-prin">4</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secu">1</button>
<button type="button" class="btn btn-secu active">2</button>
<button type="button" class="btn btn-secu">3</button>
</div>
Btn 100% width
Ex.: .btn100
Botões II
Dgrades
Podemos colocar dgrade nos botões como fizemos no background dgrad.
Cores
preto, branco, neutro, pedra, cinza, gold, amarelo, laranja, coral, vermelho, marron, marron, brown, olive, limão, verde, turqueza, cian, céu, teal, azul, índigo, navy, violeta, roxo, lilas, rosa, rose (as 4 primeiras letras).
Ex.: [ btn btn-lite B[cor] dg[1|25] ]
Ex.: [ btn btn-lite Bazul dg10 ]
as dez posições conforme o grau:
0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°
Alem de 04 circle [interno e externo] e alguns efeitos.
<button type="button" class="btn btn-lite Bcinz10 Tbran dg1 m_">dg1</button>
<button type="button" class="btn btn-lite Blara Tbran dg2 m_">dg2</button>
<button type="button" class="btn btn-lite Bmarr Tbran dg3 m_">dg3</button>
<button type="button" class="btn btn-lite Blima dg4 m_">dg4</button>
<button type="button" class="btn btn-lite Bverm6 dg5 m_">dg5</button>
<button type="button" class="btn btn-lite Bverd10 dg6 m_">dg6</button>
<button type="button" class="btn btn-lite Bpedr Tbran dg7 m_">dg7</button>
<button type="button" class="btn btn-lite Blila12 Tbran dg8 m_">dg8</button>
<button type="button" class="btn btn-lite Brose Tbran dg9 m_">dg9</button>
<button type="button" class="btn btn-lite Bazul dg10 m_">dg10</button>
Grandes com Cores Primarias
<button type="button" class="btn-g btn-prin dg9 Tbran">Botão Grande</button>
<button type="button" class="btn-g btn-secu dg10 Tbran">Botão Grande</button>
Btn Grupos com dgrade
<div class="btn-group m1" role="group">
<button type="button" class="btn-g btn-prin dg3"><< </button>
<button type="button" class="btn-g btn-prin active dg10">Centro</button>
<button type="button" class="btn-g btn-prin dg7"> >></button>
</div>
<div class="btn-group m1" role="group">
<button type="button" class="btn btn-suce active dg5">1</button>
<button type="button" class="btn btn-suce dg5">2</button>
<button type="button" class="btn btn-suce dg5">3</button>
<button type="button" class="btn btn-suce dg5">4</button>
</div>