Personalizando o Botão Enviar com CSS

January 4, 2023

ATUALIZAÇÃO: Assista à videoaula sobre o Designer de Formulários para criar estilos fantásticos para seus botões de envio!

Você sabia que o verde e o azul são as cores mais relaxantes? É por isso que estas são usadas nos websites mais populares para ajudar os usuários a se sentirem bem enquanto navegam. Os botões de envio nos formulários online também devem passar uma sensação boa, pois, é usando-os que as pessoas compartilham suas informações.

Neste guia, você aprenderá como personalizar seu botão Enviar para que seus visitantes se sintam bem ao preencher suas informações, ajudando-o a aumentar suas taxas de conversão.

Alterando a Aparência do Botão Enviar

  1. No Criador de Formulários, clique no ícone do Designer de Formulários.
  2. Acesse a guia Estilos.
  3. Role para baixo até encontrar a seção Adicionar Código CSS.
criador-de-formularios-injetar-codigo-css
  1. Aplique suas próprias regras em CSS ou utilize o seguinte código:
.form-submit-button {
	background: #0066A2;
	color: white;
	border-style: outset;
	border-color: #0066A2;
	height: 50px;
	width: 100px;
	font: bold15px arial,sans-serif;
	text-shadow: none;
}

Esta será a aparência do botão ao aplicar o código acima:

botao-enviar-personalizado

Informações Adicionais Sobre o Código CSS do seu Botão de Envio

  • .form-submit-button – Seleciona o botão Enviar no seu formulário.
  • background – Define a cor de fundo por trás do texto.
  • color – Determina a cor do seu texto.
  • border-style – Define o estilo da borda do seu botão Enviar.
  • border-color – Define a cor da borda do seu botão Enviar.
  • height – Define a altura do seu botão (indicado em pixels).
  • width – Define a largura do seu botão (indicado em pixels).
  • font – Define as propriedades da fonte.

Observação: Não esqueça de adicionar ponto-e-vírgula (;) depois de cada propriedade.

Efeito Hover no Botão de Envio

Navegue para a seção Adicionar Código CSS no Designer de Formulários usando os passos descritos acima e injete o seguinte código:

.form-submit-button {
	background: #B9DFFF;
	color: #fff;
	border: 1px solid #eee;
	border-radius: 20px;
	box-shadow: 5px 5px 5px #eee;
	text-shadow: none;
}

.form-submit-button:hover {
	background: #016ABC;
	color: #fff;
	border: 1px solid #eee;
	border-radius: 20px;
	box-shadow: 5px 5px 5px #eee;
	text-shadow: none;
}

Confira a aparência do botão antes e depois de passar o mouse por cima (efeito hover):

bota-enviar-efeito-hover

Informações Adicionais Sobre Cada Código CSS3 do seu Botão de Envio

  • .form-submit-button:hover – Essa é a classe utilizada quando o mouse passa sobre o botão Enviar. Os demais campos permanecem inalterados, exceto o fundo do botão, que é o que cria o efeito.
  • border-radius – Arredonda as bordas do seu botão.
  • box-shadow – Adiciona uma sombra no seu botão Enviar.
  • text-shadow – Adiciona uma sombra no texto dentro do seu botão Enviar (não aplicado no exemplo).

Como você se saiu? Compartilhe suas opiniões ou sugestões nos comentários abaixo.

Este guia foi útil?
Contatar o Suporte:

Nossa equipe de suporte ao cliente está disponível 24 hrs e nosso tempo de resposta está entre uma e duas horas.
Nossa equipe pode ser contatada através dos links:

Fórum de Suporte: https://www.jotform.com/answers/

Contate o Suporte da Jotform: https://www.jotform.com/contact/

Jotform for Beginners

Get more done with powerful, easy-to-use online forms. Learn how in this helpful, free guide from Jotform.

Download the Book
Jotform for Beginners

Enviar Comentário:

Jotform Avatar
Este site é protegido por reCAPTCHA, sendo aplicáveis a Política de Privacidade e os Termos de Serviço do Google.

Comentar:

Podo CommentSeja o primeiro a comentar.
Access powerful form features with Jotform's free plan.
Access powerful form features with Jotform's free plan. Sign Up for Free!
Make an online form in minutes with Jotform.
Make an online form in minutes with Jotform. Create a Free Form
Discover Jotform’s powerful online form features.
Discover Jotform’s powerful online form features. View Available Plans
Jotform for Beginners.

Get more done with powerful, easy-to-use online forms.

Learn how in this helpful, free guide from Jotform.

Jotform for Beginners.
Download the Book