Além dos estilos prontos para o botão Enviar, você também pode personalizar seu botão de envio com CSS. Faça com que seus visitantes se sintam bem ao enviar suas informações e aumente suas taxas de conversão.
Para alterar a aparência do botão de envio com CSS:
- No Criador de Formulários, abra o Designer de Formulários no lado direito.
- No painel direito, acesse a aba Estilos no topo.
- Role a página até Adicionar Código CSS.
- Digite seu CSS personalizado ou aplique 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;
}Em resumo:
- .form-submit-button — O seletor do botão de envio do seu formulário.
- background — A cor de fundo do texto.
- color — Define a cor do texto.
- border-style — Define o estilo da borda do botão de envio.
- border-color — A cor da borda do botão de envio.
- height — Define a altura do botão em pixels.
- width — Define a largura do botão em pixels.
- font — As propriedades de fonte do texto.
Veja como o botão ficará após a alteração:
Para adicionar um efeito ao passar o mouse sobre o botão de envio, você pode usar o seguinte exemplo de código CSS:
.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 sobre ele:





Enviar Comentário: