Botões Padrão

Para estilizar seu botão, basta apenas adicionar a classe ao botão, e ele vai se estilizar automaticamente.

                        
                            <button
                            class="btn-custom-branco">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-azul">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-vermelho">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-verde">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-laranja">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-preto">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-azul-escuro">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-verde-escuro">
                            Clique Aqui
                            </button>

Botões Vazados

Para deixar o botão vazado, basta apenas escrever "-vazado" depois da cor na classe do seu botão.

                        
                            <button class="btn-custom-azul-vazado">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-vermelho-vazado">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-verde-vazado">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-laranja-vazado">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-preto-vazado">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-azul-escuro-vazado">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-verde-escuro-vazado">
                            Clique Aqui
                            </button>

Tamanhos

Tamanhos fixos mantêm sempre as mesmas dimensões, independentemente da página ou do local onde forem utilizados.

Eles não se ajustam automaticamente ao tamanho das páginas ou das divs em que estão inseridos.

Para definir um botão com tamanho fixo, basta adicionar à classe do botão a variação desejada: médio, grande ou extra grande.

                        
                            <button class="btn-custom-laranja-medio">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-preto-grande">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-verde-extra-grande">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-azul-vazado-extra-grande">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-vermelho-vazado-grande">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-roxo-vazado-medio">
                            Clique Aqui
                            </button>

Arredondamento

Para deixar um botão com cantos arredondados, basta adicionar a palavra "arredondado" junto ao tamanho na classe do botão.

                        
                            <button class="btn-custom-laranja-medio-arredondado">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-preto-grande-arredondado">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-verde-extra-grande-arredondado">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-azul-vazado-extra-grande-arredondado">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-vermelho-vazado-grande-arredondado">
                            Clique Aqui
                            </button>
                        
                            <button class="btn-custom-roxo-vazado-medio-arredondado">
                            Clique Aqui
                            </button>

Ícone de inserir

Botão para inserir, é um icone de "+" onde o usuário vai clicar e abrir um arquivo para selecionar.

Para mudar as cores, basta apenas colocar a classe ao lado.

+

                        

                            <input type="file"
                            id="upload"
                            class="input-file"
                            accept=".pdf,.doc,.docx,.jpg,.png">
                            <label for="upload"
                            class="subir-arquivos-azul"><h1>+</h1></label>


                            <input type="file"
                            id="upload"
                            class="input-file"
                            accept=".pdf,.doc,.docx,.jpg,.png">
                            <label for="upload"
                            class="subir-arquivos-verde"><h1>+</h1></label>


                            <input type="file"
                            id="upload"
                            class="input-file"
                            accept=".pdf,.doc,.docx,.jpg,.png">
                            <label for="upload"
                            class="subir-arquivos-laranja"><h1>+</h1></label>


                            <input type="file"
                            id="upload"
                            class="input-file"
                            accept=".pdf,.doc,.docx,.jpg,.png">
                            <label for="upload"
                            class="subir-arquivos-vermelho"><h1>+</h1></label>


                            <input type="file"
                            id="upload"
                            class="input-file"
                            accept=".pdf,.doc,.docx,.jpg,.png">
                            <label for="upload"
                            class="subir-arquivos-preto"><h1>+</h1></label>


                            <input type="file"
                            id="upload"
                            class="input-file"
                            accept=".pdf,.doc,.docx,.jpg,.png">
                            <label for="upload"
                            class="subir-arquivos-amarelo"><h1>+</h1></label>


                            <input type="file"
                            id="upload"
                            class="input-file"
                            accept=".pdf,.doc,.docx,.jpg,.png">
                            <label for="upload"
                            class="subir-arquivos-roxo"><h1>+</h1></label>






                    

Botão liga e desliga

Esse botão é usado para ativar ou desativar itens.

                        <input type="checkbox"
                        id="myToggle"
                        class="toggle-label"
                        >
                        <label for="myToggle"
                        class="toggle-label"></label>



                

Ícones no botão

Para adicionar um ícone a um botão, insira uma imagem dentro do elemento do botão.
Utilize as classes "icone-direita" ou "icone-esquerda" na imagem para posicioná-la no lado desejado.

importante notar que a imagem se adaptará automaticamente ao tamanho do botão,
independentemente de suas dimensões originais.

                    
                        <button class="btn-custom-laranja-grande-arredondado">

                        <img
                        class="..."
                        >

                        Clique Aqui
                        </button>
                    
                        <button class="btn-custom-verde-vazado-grande-arredondado">

                        <img
                        class="..."
                        >

                        Clique Aqui
                        </button>