Quer facilitar o contato dos visitantes no seu site? Um botão flutuante do WhatsApp é uma solução prática e eficiente. Veja como adicioná-lo com HTML e CSS.
1. Código HTML
Insira o seguinte código dentro da tag <body> do seu site:
<a href="https://wa.me/SEUNUMERO" class="whatsapp-float" target="_blank">
<img src="LINK-DO-SEU-ICONE" alt="Botão WhatsApp" class="whatsapp-icon">
</a>
2. Código CSS
Adicione o seguinte código ao arquivo de estilos CSS do seu site ou dentro de uma tag <style> no <head>:
/* Estilo do botão flutuante do WhatsApp */
.whatsapp-float {
position: fixed; /* Fixa o botão na tela */
bottom: 20px; /* Distância da parte inferior da tela */
right: 20px; /* Distância da parte direita da tela */
z-index: 1000; /* Garante que o botão fique acima de outros elementos */
text-decoration: none; /* Remove o sublinhado do link */
}
.whatsapp-icon {
width: 60px; /* Tamanho do ícone */
height: 60px; /* Tamanho do ícone */
border-radius: 50%; /* Deixa o ícone redondo */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Adiciona uma sombra */
transition: transform 0.3s ease; /* Animação ao passar o mouse */
}
.whatsapp-icon:hover {
transform: scale(1.1); /* Aumenta o ícone ao passar o mouse */
}
3. Passo a Passo
- Substitua
SEUNUMEROpelo número de WhatsApp no formato internacional (exemplo:5511999999999para números do Brasil). - Substitua
LINK-DO-SEU-ICONEpelo link direto de um ícone do WhatsApp. Você pode usar serviços como Flaticon. - Salve os arquivos e atualize a página para testar.
