Como Criar um Botão de Voltar Personalizado na Sua Landing Page
Crie um botão de voltar falso no topo da sua página que redireciona para onde você quiser. Script HTML e CSS pronto para copiar e personalizar.
Um botão de voltar personalizado é uma barra fixa no topo da página com uma seta que imita o botão voltar do navegador, mas redireciona o visitante para a URL que você definir. É uma técnica visual que explora o hábito do usuário de clicar na seta de voltar, direcionando para checkout, WhatsApp ou qualquer outra página estratégica.
"O visitante vê uma seta de voltar familiar, clica por instinto -- e vai para onde você quiser."
Resumo rápido:
- Uma barra fixa no topo simula o botão voltar do navegador
- A seta redireciona para qualquer URL de sua escolha
- Funciona especialmente bem em dispositivos móveis
- HTML e CSS simples, sem dependência de bibliotecas externas
O que é o botão de voltar personalizado?
É um elemento HTML fixo no topo da página que se parece com a barra de navegação do navegador. Ele exibe uma seta de voltar (semelhante à que aparece no Chrome ou Safari) e, ao ser clicado, leva o visitante para um destino que você controla.
A ideia é simples: muitos usuários, especialmente no celular, têm o hábito de clicar na parte superior da tela para voltar. Ao colocar uma seta de voltar visível nessa região, você captura esse clique e direciona para uma página de conversão.
Essa técnica complementa o back redirect via JavaScript, que intercepta o botão voltar nativo do navegador. Juntas, as duas técnicas cobrem os dois comportamentos mais comuns de abandono.
O código HTML e CSS completo
Cole o código abaixo logo após a abertura da tag <body> na sua página:
<!-- Barra fixa no topo com seta de voltar -->
<div id="barra-topo">
<a class="seta-voltar" href="https://sua-url-aqui.com.br">
‹
</a>
</div>
<style>
/* Adiciona espaço no topo para não sobrepor o conteúdo */
body {
margin-top: 50px;
}
/* Barra fixa no topo da página */
#barra-topo {
margin: 0;
width: 100%;
background-color: #e9e9e9;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
/* Estilo da seta de voltar */
#barra-topo .seta-voltar {
background-color: #dddddd;
width: 50px;
height: 50px;
display: flex;
align-items: flex-end;
justify-content: center;
font-size: 48px;
color: #444 !important;
text-decoration: none;
cursor: pointer;
}
</style>
Substitua https://sua-url-aqui.com.br pela URL de destino. A seta ‹ é o caractere Unicode que se parece com a seta de voltar dos navegadores.
Como personalizar o botão
Você pode ajustar o visual da barra para combinar com o design da sua página:
Alterar a cor de fundo da barra:
<style>
/* Cor de fundo da barra (use a cor que preferir) */
#barra-topo {
background-color: #ffffff;
}
/* Cor de fundo da área da seta */
#barra-topo .seta-voltar {
background-color: #f0f0f0;
}
</style>
Alterar o tamanho da barra e da seta:
Para uma barra menor (40px) ou maior (60px), ajuste a altura e a largura no CSS do .seta-voltar. O font-size controla o tamanho da seta.
Alterar a cor da seta:
Mude o valor de color dentro de .seta-voltar. Para uma seta preta, use #000. Para branca, #fff.
Por que funciona melhor no mobile?
No celular, a barra de navegação do navegador ocupa a parte superior da tela. Usuários de Android, em particular, têm o hábito de tocar nessa região para voltar. Ao posicionar uma seta de voltar visual exatamente onde eles esperam encontrá-la, você captura esse toque instintivo.
Além disso, em telas pequenas a barra fixa se integra melhor ao layout, parecendo um elemento nativo da interface. Isso aumenta a taxa de clique na seta em comparação com dispositivos desktop.
Onde usar o botão de voltar personalizado
Os cenários mais eficientes para essa técnica:
- Página de vendas para checkout: a seta leva direto para a página de pagamento
- Landing page para WhatsApp: redireciona para um link
wa.mecom mensagem pré-definida - Página de captura para oferta: o visitante que clicou em voltar é levado a uma oferta complementar
- Downsell: combinado com o back redirect que intercepta o botão nativo, você cobre os dois cenários de abandono
Se você trabalha com tráfego pago e quer monitorar em tempo real se suas páginas estão convertendo, o Trafius envia alertas no WhatsApp com as métricas das suas campanhas de Meta Ads.
Perguntas frequentes
O botão de voltar personalizado substitui o back redirect?
Não. São técnicas complementares. O botão personalizado é um elemento visual clicável na página. O back redirect intercepta o botão voltar nativo do navegador. O ideal é usar os dois juntos para cobrir diferentes comportamentos de abandono.
Funciona em construtores de página como WordPress e Klickpages?
Sim. A maioria dos construtores permite inserir HTML e CSS customizado. No WordPress com Elementor, use o widget de "HTML" para colar o código. No Klickpages, use a área de "código personalizado" no cabeçalho ou corpo da página.
O Google penaliza páginas com esse tipo de elemento?
Não. O botão de voltar personalizado é um elemento HTML padrão (um link <a> com estilo CSS). Não há nenhuma prática enganosa do ponto de vista de SEO, pois é apenas um link estilizado. O Google indexa a página normalmente.
Posso adicionar texto ao lado da seta, como "Voltar"?
Sim. Basta adicionar o texto dentro da tag <a> após o caractere da seta. Por exemplo: ‹ Voltar. Ajuste o CSS para acomodar o texto, aumentando a largura do elemento e adicionando padding.
Consulte suas métricas pelo WhatsApp
Com o Trafius, você pergunta "quanto gastei hoje?" e recebe CPC, ROAS, gastos e conversões em segundos, direto no WhatsApp.
