Botões Basico e Degrade

Botões I
Botões II

Botões I

Cores Padrões

Principal, Secundaria, Infor, Alerta, Sucesso, Claro, Noturno

Cores

preto, branco, ardósia, cinza, zinco, neutro, pedra, vermelho, laranja, âmbar, amarelo, limão, verde, esmeralda, petróleo, ciano, céu, azul, índigo, violeta, roxo, fúcsia, rosa, rose (as 4 primeiras letras).

Ex.: btn btn-lite bg-[cor]

              
                
                    <button type="button" class="btn btn-principal">Principal</button>
                    <button type="button" class="btn btn-secundaria">Secundaria</button>
                    <button type="button" class="btn btn-infor">Infor</button>
                    <button type="button" class="btn btn-perigo">Perigo</button>
                    <button type="button" class="btn btn-claro">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 bg-lila">bg-lila</button>
                    <button type="button" class="btn btn-lite bg-lima">bg-lima</button>
                    <button type="button" class="btn btn-lite bg-verd12">bg-verd12</button>
                    <button type="button" class="btn btn-lite bg-rosa10">bg-rosa10</button>
                    <button type="button" class="btn btn-lite bg-marr8">bg-marr8</button>
                    <button type="button" class="btn btn-lite bg-pedr">bg-pedr</button>

Tamanhos

Ex.: .btn-[p|m|g] - .btn-p | .btn-g

              
                
                    <button type="button" class="btn btn-principal btn-g">Grande principal</button>
                    <button type="button" class="btn btn-noturno btn-g">Grande noturno</button>
                    <button type="button" class="btn btn-principal btn-p">Pequeno principal</button>
                    <button type="button" class="btn btn-secundaria disabled">secundario desab.</button>
                    <button type="button" class="btn btn-principal btn-g disabled">Grande desab.</button>

Btn Grupos

Ex.: .btn-group

              
                
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-principal active">1</button>
                        <button type="button" class="btn btn-principal">2</button>
                        <button type="button" class="btn btn-principal">3</button>
                        <button type="button" class="btn btn-principal">4</button>
                    </div> 
                    <div class="btn-group" role="group">
                    <button type="button" class="btn btn-secundaria">1</button>
                    <button type="button" class="btn btn-secundaria active">2</button>
                    <button type="button" class="btn btn-secundaria">3</button>
                </div>

Botões II

Degrades

Podemos colocar degrade nos botões como fizemos no background degrad.

Cores

preto, branco, cinza, zinco, neutro, pedra, vermelho, laranja, amarelo, limão, verde, petróleo, ciano, céu, azul, índigo, violeta, roxo, lilas, rosa, rose (as 4 primeiras letras).

Ex.: [ btn btn-lite bg-[cor] deg[1|10] ]
Ex.: [ btn btn-lite bg-azul deg10 ]

as dez posições conforme o grau:
0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°
Alem de 02 circle [interno e externo].

              
                
                <button type="button" class="btn btn-lite bg-cinz10 t-bran deg1 m_">deg1</button>
                    <button type="button" class="btn btn-lite bg-lara t-bran deg2 m_">deg2</button>
                    <button type="button" class="btn btn-lite bg-marr t-bran deg3 m_">deg3</button>
                    <button type="button" class="btn btn-lite bg-lima deg4 m_">deg4</button>
                    <button type="button" class="btn btn-lite bg-verm6 deg5 m_">deg5</button>
                    <button type="button" class="btn btn-lite bg-verd10 deg6 m_">deg6</button>
                    <button type="button" class="btn btn-lite bg-pedr t-bran deg7 m_">deg7</button>
                    <button type="button" class="btn btn-lite bg-lila12 t-bran deg8 m_">deg8</button>
                    <button type="button" class="btn btn-lite bg-rose t-bran deg9 m_">deg9</button>
                    <button type="button" class="btn btn-lite bg-azul deg10 m_">deg10</button>

Grandes com Cores Primarias

              
                
                <button type="button" class="btn-g btn-principal deg9 t-bran">Botão Grande</button>
                <button type="button" class="btn-g btn-secundaria deg10 t-bran">Botão Grande</button>

Btn Grupos com degrade

              
                
                    <div class="btn-group m1" role="group">
                        <button type="button" class="btn-g btn-principal deg3"> << </button>
                        <button type="button" class="btn-g btn-principal active deg10">Centro</button>
                        <button type="button" class="btn-g btn-principal deg7"> >></button>
                    </div>
                    <div class="btn-group m1" role="group">
                        <button type="button" class="btn btn-sucesso active deg5">1</button>
                        <button type="button" class="btn btn-sucesso deg5">2</button>
                        <button type="button" class="btn btn-sucesso deg5">3</button>
                        <button type="button" class="btn btn-sucesso deg5">4</button>
                    </div>