Atenção!

Este artigo contém código CSS e destina-se a programadores. Oferecemos este código como uma cortesia, mas não fornecemos suporte para personalizações de código ou desenvolvimento de terceiros.

Para orientação adicional, consulte o tutorial da WPBeginner sobre como adicionar CSS personalizado.

Ignorar

Usar CSS para Personalizar o Botão de Envio

Atualizado:
Ver Markdown

Introdução

Interessado em utilizar CSS para personalizar o botão Submeter? O CSS tem um potencial imenso para vários aspetos do seu site e, neste tutorial, forneceremos exemplos práticos de como aproveitar as capacidades do CSS para transformar a aparência do seu botão Submeter.

Para este tutorial, não abordaremos a criação de formulários. Se precisar de orientação sobre como criar o seu formulário, consulte este guia informativo.

É novo em CSS? Os nossos amigos da WPBeginner fornecem uma excelente definição e exemplos úteis. Descubra mais sobre este tópico na página do seu glossário informativo.

Todos os exemplos neste tutorial fornecerão o CSS para alterar o seu botão para todos os formulários, mas também para formulários individuais.

Para aprender como incorporar CSS no seu website, consulte este tutorial. Se precisar de orientação sobre como encontrar o ID do seu formulário, consulte este tutorial.

Botão de largura total

Neste caso, pretendemos que a largura do botão Submeter corresponda aos nossos campos de formulário. Para conseguir isto, aplicaremos o seguinte CSS.

Para um único formulário

Este exemplo tem como alvo apenas o formulário com o ID 23.

button#wpforms-submit-23 {
    width: 100%;
}

Para todos os formulários

Este exemplo tem como alvo todos os WPForms.

button.wpforms-submit {
    width: 100% !important;
}

Efeito de botão pressionado para um único formulário

Usando o seguinte CSS, faremos com que o botão pareça pressionado quando for clicado.

Para um único formulário

Este exemplo tem como alvo apenas o formulário com o ID 23.

button#wpforms-submit-23 {
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #b95d52;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

button#wpforms-submit-23:hover {
	background-color: #55555e;
}

button#wpforms-submit-23:active {
  background-color: #55555e;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

Para todos os formulários

Este exemplo tem como alvo todos os WPForms.

button.wpforms-submit {
  display: inline-block !important;
  font-size: 24px !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
  outline: none !important;
  color: #fff !important;
  background-color: #b95d52 !important;
  border: none !important;
  border-radius: 15px !important;
  box-shadow: 0 9px #999 !important;
}

button.wpforms-submit:hover {
	background-color: #55555e !important;
}

button.wpforms-submit:active {
  background-color: #55555e !important;
  box-shadow: 0 5px #666 !important;
  transform: translateY(4px) !important;
}

este css fará com que o botão submeter pareça pressionado quando clicado

Submeter com 2 linhas de texto

Para este exemplo, teremos um botão com 2 linhas de texto.

Para um único formulário

Este exemplo tem como alvo apenas o formulário com o ID 23.

button#wpforms-submit-23 {
    max-width: 20%;
    line-height: 1.2em;
    height: auto;
}

Para todos os formulários

Este exemplo tem como alvo todos os WPForms.

button.wpforms-submit {
    max-width: 20% !important;
    line-height: 1.2em !important;
    height: auto !important;
}

com este CSS pode fazer com que o botão submeter apareça em mais de 2 linhas de texto

Animação ao passar o rato

Para este exemplo, estamos a adicionar uma seta dupla ao passar o rato sobre o botão com o código content: '\00bb'; no CSS. Para mais informações sobre como encontrar o código HTML correto para o seu símbolo, consulte a documentação da W3C Schools.

Poderia alterar este ícone para qualquer ícone baseado em fonte, como pode ser encontrado neste tutorial.

Para um único formulário

Este exemplo tem como alvo apenas o formulário com o ID 23.

button#wpforms-submit-23 {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

button#wpforms-submit-23:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}

button#wpforms-submit-23:hover {
  padding-right: 25px;
}

button#wpforms-submit-23:hover:after {
  opacity: 1;
  right: 50px;
}

Para todos os formulários

Este exemplo tem como alvo todos os WPForms.

button.wpforms-submit {
  border-radius: 4px !important;
  border: none !important;
  color: #FFFFFF !important;
  text-align: center !important;
  width: 200px !important;
  transition: all 0.5s !important;
  cursor: pointer !important;
  margin: 5px !important;
  cursor: pointer !important;
  display: inline-block !important;
  position: relative !important;
  transition: 0.5s !important;
}

button.wpforms-submit:after {
  content: '\00bb' !important;
  position: absolute !important;
  opacity: 0 !important;
  top: 11px !important;
  right: 0 !important;
  transition: 0.5s !important;
}

button.wpforms-submit:hover {
  padding-right: 25px !important;
}

button.wpforms-submit:hover:after {
  opacity: 1 !important;
  right: 50px !important;
}

este CSS dar-lhe-á um efeito de animação quando pairar sobre o botão

Alterar a cor

Para este exemplo, vamos alterar a cor do botão. Vamos também alterar o tamanho do texto, a cor do texto e a família de fontes neste exemplo também.

Para um único formulário

Este exemplo tem como alvo apenas o formulário com o ID 23.

button#wpforms-submit-23 {
    font-family: roboto;
    font-size: 22px;
    background-color: #b95d52;
    text-transform: uppercase;
    color: #ffffff;
    box-shadow: unset;
    border: 1px solid transparent;
    background: unset;
    background-color: #b95d52;
}

button#wpforms-submit-23:hover {
    background-color: #ffffff;
    border: 1px solid #b95d52;
    opacity: 1;
    color: #b95d52;
}

Para todos os formulários

Este exemplo tem como alvo todos os WPForms.

button.wpforms-submit {
    font-family: roboto !important;
    font-size: 22px !important;
    background-color: #b95d52;
    text-transform: uppercase;
    color: #ffffff !important;
    box-shadow: unset !important;
    border: 1px solid transparent !important;
    background: unset !important;
    background-color: #b95d52 !important;
}

button.wpforms-submit:hover {
    background-color: #ffffff !important;
    border: 1px solid #b95d52 !important;
    opacity: 1 !important;
    color: #b95d52 !important;
}

este botão de exemplo alterou a cor, cor de fundo, tamanho da fonte, família da fonte e todas as maiúsculas para o texto

Botão com sombra de caixa

Este exemplo mostrar-lhe-á como colocar uma sombra de caixa no botão usando o seguinte CSS.

Para um único formulário

Este exemplo tem como alvo apenas o formulário com o ID 23.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

Alternativamente, poderia fornecer a sombra de caixa apenas ao passar o rato usando este CSS para o formulário.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

button#wpforms-submit-23:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

Para todos os formulários

Este exemplo tem como alvo todos os WPForms.

button#wpforms-submit-23 {
  background-color: #b95d52;
  border: none;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

E novamente, tal como no exemplo acima, poderia colocar a sombra de caixa apenas ao passar o rato.

button.wpforms-submit {
    background-color: #b95d52 !important;
    border: none !important;
    color: white !important;
    padding: 10px 30px !important;
    text-align: center;
    text-decoration: none !important;
    display: inline-block;
    font-size: 16px !important;
    margin: 4px 2px !important;
    cursor: pointer !important;
    -webkit-transition-duration: 0.4s !important;
    transition-duration: 0.4s !important;
}

button.wpforms-submit:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19) !important;
}

neste exemplo de CSS estamos a mostrar box-shadow no botão em todos os momentos ou apenas quando pairar, dependendo do trecho que utilizar

E estes são apenas alguns exemplos de quão fácil é personalizar o botão de submissão usando CSS. Gostaria também de personalizar os rótulos do seu formulário? Dê uma vista de olhos ao nosso tutorial sobre Como Adicionar Imagens Antes ou Depois dos Rótulos do Seu Formulário.

FAQ

P: Posso usar este CSS para botões de Quebra de Página também?

R: Absolutamente, para usar qualquer um destes exemplos com botões padrão ao usar o botão Quebra de Páginabutton.wpforms-page-button.

Alternativamente, se quisesse ter como alvo apenas um único formulário, usaria a classe CSS form#wpforms-form-3221 button.wpforms-page-button em vez disso, e lembre-se apenas de atualizar o ID do formulário para corresponder ao seu próprio ID de formulário.

Por exemplo, o exemplo de Animação ao pairar, como mostrado acima para o botão Submeter, faremos o mesmo para os botões de quebra de página também.

Este CSS é para um formulário específico, o ID do formulário 3221. Se quiser manter isto num único formulário, terá de atualizar o 3221 para corresponder ao seu próprio ID. Para obter ajuda sobre como encontrar o ID do seu formulário, reveja a nossa documentação útil.

form#wpforms-form-3221 button.wpforms-page-button {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
form#wpforms-form-3221 button.wpforms-page-button:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}
 
form#wpforms-form-3221 button.wpforms-page-button:hover {
  padding-right: 25px;
}
 
form#wpforms-form-3221 button.wpforms-page-button:hover:after {
  opacity: 1;
  right: 50px;
}

Este CSS seria para todos os formulários.

button.wpforms-page-button {
  border-radius: 4px;
  border: none;
  color: #FFFFFF;
  text-align: center;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}
 
button.wpforms-page-button:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 11px;
  right: 0;
  transition: 0.5s;
}
 
button.wpforms-page-button:hover {
  padding-right: 25px;
}
 
button.wpforms-page-button:hover:after {
  opacity: 1;
  right: 50px;
}

aqui está um exemplo para alterar os botões de Quebra de Página

Etiquetado:
Ainda preso? Como podemos ajudar?
Última Atualização em 29 de ago. de 2023