COMO INSERIR BOTÕES DE COMPARTILHAMENTO NO SITE

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

O que é um botão FAB?

O que é um botão FAB?

Leia mais sobre: FAB UI
É um botão flutuante muito utilizado por designers nos seus projetos.

A sigla vem do inglês para Floating Action Button ou seja botão de ação flutuante. É um botão que fica na tela sempre na mesma posição independente da rolagem da página. Apesar de ficar em um canto em tamanho pequeno ele tem uma grande interferência na interface da aplicação ou site. Esse botão flutuante está previsto nos principios do Material Design. 

Ele tem um link para outra página ou um submenu com vários outros. Também é utilizado para guardar um chat, ou um link para o whatsapp, ou um botão para subir ao topo da página.

Dependendo da solução pode ser circular, quadrado, arredondado ou com outro formato dependendo do leiaute. Ele dispara uma ação definida na interface do usuário de acordo com o toque ou o clique.

É muito usado em sites, apps e aplicações web. Serve normalmente para mostrar uma ação primária ou comum na página, ou seja para dar continuidade no fluxo principal estipulado. Por isso seu conteúdo fica sobre os outros elementos.

Pode ser usado mais de um FAB na tela, mas se tiverem ações equivalentemente importante. Têm três tamanhos mais usados: regulares em tamanho apropriado e já definido de acordo com a tela, mini com um simbolo menor que se expande ao passar o mouse por cima, ou estendidos que ocupa a largura inteira do bloco ou tela.

A cor do botão normalmente faz contraste com o fundo da página, podendo ser apenas para contrastar no leiaute ou de acordo com a ação. Normalmente fica localizado no canto esquerdo inferior da aplicação.



Leia mais sobre: FAB UI
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