Personalizando o Botão Enviar com CSS

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.

Watch on youtube

How to create custom submit buttons

Para alterar a aparência do botão de envio com CSS:

1. No Criador de Formulários, abra o Designer de Formulários no lado direito.

2. No painel direito, acesse a aba Estilos no topo.
3. Role a página até Adicionar Código CSS.

4. 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: