Uso de CSS para personalizar o botão Enviar

Atualizado:

Introdução

Interessado em utilizar o 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 aproveitar os recursos do CSS para transformar a aparência do seu botão Enviar.

Para este tutorial, não vamos nos aprofundar na criação de formulários. Se precisar de orientação para criar seu formulário, consulte este guia informativo.

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

Todos os exemplos deste tutorial lhe darão o CSS para alterar o botão para todos os formulários, mas também para formulários individuais.

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

Botão de largura total

Nesse caso, nosso objetivo é combinar a largura do botão Enviar com os campos do formulário. Para isso, aplicaremos o seguinte CSS.

Para formulário único

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

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

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

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

Para um único formulário

Esse 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 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;
}

Esse css fará com que o botão Enviar pareça pressionado quando clicado

Enviar com 2 linhas de texto

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

Para um único formulário

Esse 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 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 Enviar apareça sobre duas linhas de texto

Animação ao passar o mouse

Para este exemplo, estamos trazendo uma seta dupla ao passar o mouse sobre o botão por meio da tag content: '\00bb'; no CSS. Para obter 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 esse ícone para qualquer ícone baseado em fonte, como o que pode ser encontrado neste tutorial.

Para um único formulário

Esse 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 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;
}

Esse CSS lhe dará um efeito de animação quando você passar o mouse sobre o botão

Alterar 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

Esse 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 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;
}

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

Botão Box-shadow

Este exemplo mostrará como colocar um box-shadow no botão usando o CSS a seguir.

Para um único formulário

Esse 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);
}

Como alternativa, você pode fornecer o box-shadow somente 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ê poderia colocar o box-shadow somente no hover. 

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;
}

Nesse exemplo de CSS, estamos exibindo o box-shadow no botão o tempo todo ou apenas ao passar o mouse, dependendo do snippet usado

E esses são apenas alguns exemplos de como é fácil personalizar o botão Enviar usando CSS. Você também gostaria de personalizar os rótulos de seus formulários? Dê uma olhada em nosso tutorial sobre Como adicionar imagens antes ou depois dos rótulos do formulário.

PERGUNTAS FREQUENTES

P: Posso usar esse CSS também para botões de quebra de página?

A: Absolutely, to use any of these examples with standard buttons when using the Page Breakbutton.wpforms-page-button.

Como alternativa, se você quisesse direcionar apenas um único formulário, usaria o form#wpforms-form-3221 button.wpforms-page-buttone lembre-se de atualizar o ID do formulário para que corresponda ao seu próprio ID do formulário.

Por exemplo, o exemplo Animation on hover (Animação ao passar o mouse ), conforme mostrado acima para o botão Submit (Enviar ), também faremos o mesmo para os botões de quebra de página.

Esse CSS é para um formulário específico, o ID de formulário 3221. Se quiser manter isso em um único formulário, será necessário atualizar o 3221 para que corresponda ao seu próprio ID. Para obter ajuda sobre como encontrar seu ID de formulário, consulte 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;
}

Esse 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 de alteração dos botões de quebra de página

Tagged
Ainda está preso? Como podemos ajudar?
Última atualização em 29 de agosto de 2023