Atenção!

Este artigo contém código CSS e destina-se a desenvolvedores. 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.

Dispensar

Usando CSS para Personalizar o Botão de Envio

Atualizado:
Ver Markdown

Introdução

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

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

Novo em CSS? Nossos amigos do WPBeginner fornecem uma excelente definição e exemplos úteis. Descubra mais sobre este tópico em sua página de glossário informativo.

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

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

Botão de largura total

Neste caso, nosso objetivo é igualar a largura do botão Enviar aos campos do nosso formulário. Para conseguir isso, aplicaremos o seguinte CSS.

Para um único formulário

Este exemplo visa apenas o formulário com o ID 23.

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

Para todos os formulários

Este exemplo visa todos os WPForms.

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

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

Usando o seguinte CSS, faremos o botão parecer pressionado quando for clicado.

Para um único formulário

Este exemplo visa 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 visa 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 de envio pareça pressionado ao ser clicado

Enviar com 2 linhas de texto

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

Para um único formulário

Este exemplo visa 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 visa todos os WPForms.

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

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

Animação ao passar o mouse

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

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

Para um único formulário

Este exemplo visa 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 visa 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 lhe dará um efeito de animação quando você passar o mouse sobre o botão

Alterando a cor

Para este exemplo, vamos alterar a cor do botão. Também vamos alterar o tamanho do texto, a cor do texto e a família da fonte neste exemplo.

Para um único formulário

Este exemplo visa 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 visa 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 mudou a cor, cor de fundo, tamanho da fonte, família da fonte e todas as letras maiúsculas para o texto

Botão com sombra de caixa

Este exemplo mostrará como aplicar uma sombra de caixa ao botão usando o seguinte CSS.

Para um único formulário

Este exemplo visa 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, você pode fornecer a sombra de caixa apenas ao passar o mouse 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 visa 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, como no exemplo acima, você pode colocar a sombra de caixa apenas ao passar o mouse.

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 mostrando box-shadow no botão o tempo todo ou apenas ao passar o mouse, dependendo do trecho que você usar

E estes são apenas alguns exemplos de como é fácil personalizar o botão de envio usando CSS. Você também gostaria de personalizar os rótulos do seu formulário? Dê uma olhada em nosso tutorial sobre Como Adicionar Imagens Antes ou Depois dos Rótulos do Seu Formulário.

Perguntas Frequentes

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

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

Alternativamente, se você quisesse direcionar apenas um único formulário, usaria a classe CSS form#wpforms-form-3221 button.wpforms-page-button em vez disso, e lembre-se 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 passar o mouse, como mostrado acima para o botão Enviar, 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 você quiser manter isso em um único formulário, precisará atualizar o 3221 para corresponder ao seu próprio ID. Para obter ajuda sobre como encontrar o ID do seu formulário, revise 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 mudar os botões de Quebra de Página

Marcado:
Ainda com dificuldades? Como podemos ajudar?
Última Atualização em 29 de ago. de 2023