How to Change the Submit Button Color with WPForms

Para usar cores diferentes, substitua os códigos hexadecimais no código:

Este guia mostrará como alterar a cor do seu botão de envio usando CSS.

a estilização padrão é aplicada ao botão de envio

Com o lançamento do WPForms 1.8.1, agora você pode alterar facilmente a cor do botão de Envio sem usar CSS, apenas adicionando o formulário à sua página usando um editor de blocos. Com este recurso de estilização de formulários, você pode estilizar seus formulários sem escrever nenhum CSS. Para saber mais sobre isso, por favor, confira esta documentação útil.

No entanto, você também pode usar CSS personalizado para conseguir isso e, para este tutorial, este é o método que usaremos para alterar a estilização da cor do botão Enviar.

Configurando o Formulário

Para começar, abra o construtor de formulários criando um novo formulário ou editando um existente. Adicione os campos de formulário desejados conforme necessário.

Para obter ajuda na criação de um formulário, revise nosso guia completo sobre como criar seu primeiro formulário.

Adicionando o Código CSS

O trecho de CSS a seguir alterará a cor do seu botão de envio:

Se precisar de ajuda sobre como e onde adicionar CSS ao seu site, confira nosso tutorial sobre como adicionar estilos CSS personalizados.

O CSS acima alterará o fundo da cor do botão de envio para azul (#066AAB) com texto branco em todos os botões Enviar do WPForms em seu site.

As cores neste CSS são definidas usando códigos hexadecimais, sobre os quais você pode ler mais nesta documentação.

é assim que mudamos a cor do botão de envio

Observação: Para alterações de estilo adicionais no botão de envio, como estilos de passagem do mouse, consulte nosso tutorial de estilização de botões de envio.

Personalizando o Código

Para usar cores diferentes, substitua os códigos hexadecimais no código:

Na linha 7, substitua #066AAB pela cor desejada do botão.

Na linha 8, substitua #066AAB pela mesma cor para combinar com a borda.

Na linha 14, substitua #04446E pela cor de passagem do mouse desejada (geralmente um tom mais escuro da cor do seu botão).

Por exemplo, para fazer um botão vermelho, você pode usar:

background-color: #ff0000 !important;
border-color: #ff0000 !important;

Perguntas Frequentes

P: Por que este CSS não funciona para mim?

R: Se você não vir suas alterações, primeiro limpe o cache do seu navegador. Se ainda não estiver funcionando, seu tema pode estar substituindo os estilos. Tente adicionar !important às suas regras de CSS, como mostrado em nosso exemplo. Para mais ajuda, veja nosso guia de solução de problemas de CSS.

P: Isso funcionará para os botões Próximo e Anterior também?

R: Se você estiver usando um campo Quebra de Página em seu formulário e estiver usando botões Próximo e Anterior para navegação, usaremos um CSS que fará com que todos esses botões tenham exatamente a mesma estilização. Simplesmente copie este CSS para o seu site.

.wpforms-form button[type=submit], button.wpforms-page-button {
    background-color: #024488 !important;
    border-color: #024488 !important;
    color: #fff !important;
    transition: background 0.3s ease-in-out;
}

.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
    background-color: #022B57 !important;
}

P: Posso direcionar apenas um dos meus formulários?

A: Se você quisesse alterar apenas um formulário, bastaria selecionar o ID do formulário no seu CSS. Neste exemplo, vamos selecionar o ID do formulário 999 para o botão Enviar, bem como para os botões Próximo e Anterior do campo Quebra de Página.

Você precisará atualizar o 999 para corresponder ao ID do seu próprio formulário.

Se você não tem certeza de onde encontrar o ID do seu formulário, confira nosso guia sobre localizar IDs de campos e formulários.

button#wpforms-submit-999, form#wpforms-form-999 button.wpforms-page-button {
    background-color: #024488;
    border-color: #024488;
    color: #fff;
    transition: background 0.3s ease-in-out;
}

button#wpforms-submit-999:hover, form#wpforms-form-999 button.wpforms-page-button:hover {
    background-color: #022B57;
}

E é isso! Você alterou a cor do seu botão de envio. Em seguida, você gostaria de usar CSS para personalizar o botão Enviar de outras maneiras? Por favor, dê uma olhada em nosso tutorial sobre usar CSS para personalizar o botão de envio.

Como Alterar a Cor do Botão de Envio

Resumo de IA