Botão de Compartilhamento de redes sociais Html Css

Botão de Compartilhamento de redes sociais Html Css

Neste artigo veremos como criar Botões de Redes Sociais com Html e Css.

Para isso precisamos do HTML, CSS e Javascript.

Nesta seção, projetaremos uma estrutura simples na tag <div>. temos dentro da tag <div> a tag <ol>, <li> e dentro da tag li temos a tag <href> para inserir o link da rede social desejada. 

Vamos Adicionar o HTML

     <div class="btn-share">

        <ol>
            <li><a href="#" title="Facebook"><i class="icon icon-facebook"></i></a></li>
            <li><a href="#" title="Instagram"><i class="icon icon-instagram"></i></a></li>
            <li><a href="#" title="Whatsapp"><i class="icon icon-whatsapp"></i></a></li>
            <li><a href="#" title="Twitter"><i class="icon icon-twitter"></i></a></li>
        </ol>

        <div class="toggle"></div>
                    
     </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar o nosso botão de Redes Sociais.

.toggle{

    width: 55px;
    height: 55px;
    background-color: #008FE6;
    color: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.toggle::before{

    content: '\e159';
    width: 100%;
    height: 100%;
    position: absolute;
    color: white;
    font-family: 'untitled-font-1';
    text-align: center;
    line-height: 55px;
    font-size: 20px;
    transition:0.5s;
}

.btn-share.ativo .toggle::before{
   
   background-color:#373939;
   color: #ffffff;
   transition:0.5s;

}

.btn-share{ 

    margin:auto; 
    width:50px; 
    height:50px; 

}

.btn-share ol{
    position: absolute;
    margin: 2px;
    width: 50px;
    height: 50px;
}

.btn-share ol li{
    
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 55px;
    background: #FAFAFA;
    display: block;
    border-radius: 50%;
    transition: all .5s;
    text-align: center;
}

.btn-share ol li a{
    
    font-size:1.3em;
    text-decoration:none;
    color:#fff;
}

.btn-share.ativo ol li{
    transform: translate(0);
    transition: all 0.4s;
}

.btn-share.ativo ol li:nth-child(1){
    
    transition-delay: 0.4s;
    transform: translateX(-60px);
    background-color:#3b5998;

}

.btn-share.ativo ol li:nth-child(2){

    transition-delay: 0.3s;
    transform: translateX(-120px);

    /*Degradê do Instagram*/
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);

}

.btn-share.ativo ol li:nth-child(3){

    transition-delay: 0.2s;
    transform: translateX(-180px);
    background-color:#34af23;

}

.btn-share.ativo ol li:nth-child(4){

    transition-delay: 0.1s;
    transform: translateX(-240px);
    background-color:#00acee;

}

Vamos adicionar o script

<script src="js/jquery.js"></script>
<script>

  const toggle = document.querySelector('.toggle');
  toggle.addEventListener('click',()=>{
    const share_btn = document.querySelector('.btn-share');
    share_btn.classList.toggle('ativo');
  })

</script>

Combinando as três seções acima Html, Css e o Script temos o seguinte Resultado !

Botão de Compartilhamento de redes sociais Html Css

Veja o Resultado !

Baixar Código Veja Funcionando