COMO COLOCAR BOTÕES FLUTUANTES PARA REDES SOCIAIS

Como fazer botão flutuante no site?

Como fazer botão flutuante no site?

Leia mais sobre: Botão flutuante
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" >
 <!-- Aqui inicia a div com a class icones que será o bloco que irá conter os icones ou botões. -->
  <a href="https://api.whatsapp.com/send?text=<?php echo 'https://diretoaoponto-tech.com.br'.$_SERVER["REQUEST_URI"]; ?>" target="_blank">
<!-- Aqui é inserido o link com a url da api do whatsapp com o caminhi da página. Junto no caminho da página é utilizado o PHP para pegar dinamicamente a página atual para isso é usado o domínio seguido de $_SERVER["REQUEST_URI"]; ?>. -->
    <img class="img-responsive" src="/img/whatsapp-watercolor.png" alt="botão de compartilhamento whatsapp" title="Compartilhe o link da página no whatsapp">
<!-- Aqui é inserido a imagem. -->
  </a>
<!-- Fecha o link. -->
</div> 
<!-- Fecha a div icones -->
 



Leia mais sobre: Botão flutuante
Metaverso e Desenvolvimento Web: Como Criar Experiências Imersivas Usando Tecnologias Web

Metaverso e Desenvolvimento Web: Como Criar Experiências Imersivas Usando Tecnologias Web

Descubra como criar experiências imersivas para o metaverso usando tecnologias web como WebXR e WebGL. Aprenda como preparar seu site para o futuro da internet com APIs de RA e RV.
Metaverso e o futuro da web
Quer deixar seu site mais profissional e memorável?

Quer deixar seu site mais profissional e memorável?

Aprenda a criar e adicionar um favicon personalizado em poucos passos. Descubra como esse pequeno ícone pode fazer toda a diferença na identidade da sua marca.
como colocar ícone no html
Qual é a melhor plataforma para monetizar meu site em 2024, Adsterra ou Google AdSense?

Qual é a melhor plataforma para monetizar meu site em 2024, Adsterra ou Google AdSense?

Embora o Google AdSense seja amplamente conhecido, o Adsterra oferece vantagens significativas. Para saber como o Adsterra pode revolucionar seus ganhos online, leia nosso artigo completo.
Adsterra ou AdSense: Qual é Melhor para Monetizar
botão de compartilhamento whatsapp botão de compartilhamento no twiter botão de compartilhamento do site botão de compartilhamento no linkedin botão de compartilhamento whatsapp