Personalizar os Botões Anterior e Seguinte em Formulários de Várias Páginas Utilizando CSS

Quer personalizar os botões anterior e seguinte nos seus formulários de várias páginas? Personalizar os botões dos seus formulários pode ser uma ótima forma de adicionar personalidade e estilo ao seu site.

Este tutorial irá abordar como personalizar o estilo dos botões anterior e seguinte do seu formulário de várias páginas.

Antes de começar, certifique-se de que o WPForms está instalado e ativado no seu site e que verificou a sua licença. Em seguida, crie um formulário de várias páginas para adicionar botões anterior e seguinte.

Estilizar os Botões Anterior e Seguinte

CSS oferece uma flexibilidade incrível para personalizar os botões anterior e seguinte no WPForms e em qualquer outro aspeto do seu formulário.

Se é novo em CSS ou gostaria de uma revisão, o melhor lugar para começar é com o nosso guia introdutório de CSS.

Aqui está o CSS padrão para os botões anterior e seguinte do WPForms, bem como comentários para notar o que cada linha de CSS faz:

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #eee; /* Grey background */
    border: 1px solid #ddd; /* Dark grey border */
    color: #333; /* Black text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */
}

Pode alterar cada um destes valores para estilizar os seus botões de diferentes formas. Como exemplo, começaremos por alterar a cor de fundo dos nossos botões para laranja e o texto para branco.

Primeiro, precisaremos de encontrar os códigos hexadecimais para as cores que queremos usar. htmlcolorcodes.com e Adobe Color CC são ferramentas gratuitas úteis que podem ajudar a escolher as suas cores.

Assim que tivermos os códigos hexadecimais para as cores que queremos, podemos adicioná-los ao nosso CSS:

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #e27730 !important; /* Orange background */
    color: #fff !important; /* White text */
}

Em seguida, precisamos de adicionar este CSS ao nosso site. A forma mais fácil de o fazer é usando o Editor CSS do WordPress. Para tal, vá a Aparência » Personalizar e selecione CSS Adicional.

Depois de abrir a secção CSS Adicional, pode adicionar o seu novo CSS. Em seguida, clique no botão Publicar e está pronto!

Veja como os nossos botões ficarão agora, com o nosso CSS de exemplo aplicado:

Personalizar Estilos de Hover

O CSS permite também aplicar estilos completamente diferentes quando os utilizadores passam o cursor do rato sobre um botão. Esta alteração ajuda a melhorar a experiência do utilizador porque informa os utilizadores que o botão é clicável.

Abaixo está o CSS padrão para os estilos de hover de botões do WPForms. Conforme observado nos comentários, a cor de fundo fica um pouco mais escura e a cor da borda fica um pouco mais clara:

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #ddd; /* Darker grey background */
    border: 1px solid #ccc; /* Lighter grey border */
}

Poderá notar que isto é muito menos CSS do que viu para o botão quando não está em hover. Isto acontece porque o CSS aplicará todos os estilos anteriores ao seu botão em hover, a menos que seja instruído de outra forma.

Por exemplo, se mantiver os estilos padrão, a cor do texto permanecerá preta quando os utilizadores passarem o cursor sobre o botão. Isto acontece porque a cor do texto do botão seria normalmente preta, e não lhe dissemos para mudar ao passar o cursor.

Tal como com o exemplo anterior de CSS personalizado, pode modificar qualquer um destes valores para alterar os estilos de hover do botão. Para o nosso exemplo, daremos ao botão um fundo laranja mais escuro quando o cursor passar sobre ele.

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #cd631d !important; /* Darker orange background */
}

Eis como os botões ficarão com o CSS aplicado:

Exemplo de CSS

Agora que cobrimos o básico, vamos percorrer um exemplo completo de CSS personalizado para os botões anterior e seguinte.

Eis o CSS que adicionaremos para este exemplo, que inclui alterações de estilo ao passar o cursor:

/* New button styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #003B6D !important; /* Dark blue background */
    border: 2px solid #BDBDBD !important; /* Gray border */
    color: #fff !important; /* White text */
    font-size: 1em !important; /* Increase text size */
    font-weight: bold !important; /* Bold text */
    padding: 16px !important; /* Increase distance between text and border */
    width: 25% !important; /* Make the button quarter-width */
}

/* New button hover styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #BDBDBD !important; /* Gray background */
    border: 2px solid #003B6D !important; /* Dark blue border */
}

Abaixo está como os nossos botões personalizados ficarão com este CSS aplicado:

E eis como os nossos botões ficarão quando o cursor passar sobre eles. Lembre-se, as únicas alterações são as cores de fundo e de borda:

É tudo! Pode agora personalizar os seus botões anterior e seguinte usando CSS personalizado.

Quer adicionar ainda mais estilos personalizados aos seus formulários? Veja o nosso tutorial sobre como personalizar campos de formulário individuais.