Guia do usuário JotForm / Criar formulários /

Como Personalizar o botão de enviar com CSS

Como Personalizar o botão de enviar com CSS

ATUALIZAÇÃO: Assista ao curso em vídeo sobre o Designer de Formulários para criar estilos fantásticos de botões de envio!


Você sabia que o verde e o azul são as cores mais relaxantes? É por isso que são usadas nos websites mais populares para ajudar os usuários a se sentirem bem enquanto navegam. Botões de envio em formulários na web também devem passar uma sensação boa porque é onde as pessoas compartilham as informações mais sensíveis.

Com essa guia, você vai aprender a personalizar seus botões de envio para que os visitantes se sintam bem ao enviar suas informações, e assim você poderá aumentar as taxas de conversão.

1. Clique no ícone Designer de Formulários


2. Na área Adicione um código CSS, cole o código CSS abaixo ou o seu próprio código personalizado

.form-submit-button {

background: #0066A2;

color: white;

border-style: outset;

border-color: #0066A2;

height: 50px;

width: 100px;

font: bold 15px arial, sans-serif;

text-shadow:none;

}

 Veja como vai ficar com o código acima:

 

Detalhes do código CSS para o seu botão de envio

.form-submit-button - Seleciona o botão de envio no seu formulário.

background - Define a cor de fundo atrás do texto.

color - Determina a cor do seu texto.

border-style - Define o estilo das bordas do seu botão de envio.

border-color - Define a cor das bordas do seu botão de envio.

height - Define a altura do seu botão e é indicado em pixels.

width - Define a largura do seu botão e é indicado em pixels

font - Define as propriedades da fonte.

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

Botão de Envio CSS3 & Efeito Hover

Siga os passos descritos acima para personalizar seu botão de envio. A única coisa que muda é o código

Exemplo de CSS3 para um botão de envio:

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

}


Veja como fica:

css3 submit button

e ao passar o mouse por cima:

css3 submit button hover

Detalhes de cada código CSS3 para o seu botão de Envio

.form-submit-button:hover - Essa propriedade faz com que o botão se altere quando o mouse passa sobre o botão. Os demais campos permanecem inalterados, exceto o fundo, para mostrar o que acontece quando o mouse passa.

border-radius - Arredonda as bordas do seu botão.

box-shadow - Coloca uma sombra no seu botão de envio.

text-shadow (não foi aplicado no exemplo) - Coloca uma sombra no texto dentro do seu botão de envio.

Enviar comentário