***Saiba como fazer botão flutuante

Como fazer botão flutuante no site?

Para isso é usado principalmente position: fixed; no CSS assim:

Segue abaixo o código dos botões flutuantes utilizados aqui no site, usando o whatsapp como exemplo, começando pelo CSS.

.icones { /* Aqui é iniciado a configuração geral dos botões ou icones. */
    position: fixed; /* Aqui é definido o position como fixed que torna o bloco inserido flutuante com orientação na página geral. */
    bottom: 2%; /* Para deixar os botões na parte inferior da página é usado o bottom com um valor pequeno, no caso 2%. */
    left: 50%; /* Para centralizar os botões no meio da página é usado o left com 50%. */
    padding: 1%; /* Aqui é inserido um pequeno espaço dentro do bloco. */
    z-index: 10000000; /* O z-index é usado para uma ordenação do estilo, por isso aqui é usado um valor alto, para ficar por cima dos outros. */
}
.icones img:hover { /* Aqui é definido o efeito quando o mouse passa por cima da imagem */
    filter: invert(100%); /* Foi usado o filter: invert para colocar as cores opostas das imagens. */
}

Abaixo segue a parte do código em HTML com o exemplo do botão do whatsapp, mas pode ser usado qualquer outro. Primeiro vou inserir a linha do HTML e depois comentá-las.

<div class="icones col-sm-12" >

<a href="https://api.whatsapp.com/send?text=<?php echo 'https://diretoaoponto-tech.com.br'.$_SERVER["REQUEST_URI"]; ?>" target="_blank">

<img class="img-responsive" src="/img/whatsapp-watercolor.png" alt="botão de compartilhamento whatsapp" title="Compartilhe o link da página no whatsapp">

</a>

</div>

Como colocar botão do whatsapp no site?

Leia mais sobre: Botão whatsapp no site

Pode ser usada uma imagem para fazer o link para whatsapp web logado.

Como essa:

Com um link como esse:

<a href="https://api.whatsapp.com/send?phone=CELULAR_DO_WHATSAPP&text=Oi%2C%20encontrei%20o%20site%20na%20internet%2C%20gostaria%20de%20saber%20mais%20sobre" target="_blank">

<img src="/imagens/whats.png">

</a>

O link é para api do whatsapp. Nele são passados alguns parâmetros obrigatórios ou não.

O primeiro é o phone, aqui é passado o telefone com whatsapp que irá receber a mensagem. Esse parâmetro é obrigatório.

Depois pode ser passado um texto padrão para o contato, passado no text. Neste exemplo é passado "Oi encontrei o site na internet gostaria de saber mais sobre".

Por último se usa uma tag a target com _blank para abrir a página do whatsapp em uma nova aba, sem tirar o cliente do site.

Leia mais sobre: Botão whatsapp no site