Botões de redes sociais para site html

Botões de redes sociais para site html

Este tutorial veremos como criar Botões de Redes Sociais com html e css com efeito de slide Right quando passamos o mouse sobre os Icones.

Nesta seção, projetaremos uma estrutura das seguintes tags abaixo. 

Tags: <div>, <i>, <span> e a tag <a> para inserirmos o link de destino da Rede Social.

Essas tags usaremos para criar os Botões das Redes Sociais com html e css.

Vamos Adicionar o HTML

    <div class="botao-rs facebook">
     
      <a href="#" title="Facebook">
        <i class="icon icon-facebook"></i>
        <span>Facebook</span>
      </a>

    </div>

    <div class="botao-rs instagram">
        
        <a href="#" title="Instagram">    
           <i class="icon icon-instagram"></i>
           <span>Instagram</span>
        </a>

    </div>

    <div class="botao-rs twitter">
      
       <a href="#" title="Twitter">
            <i class="icon icon-twitter"></i>
            <span>Twitter</span>
        </a>

    </div>

    <div class="botao-rs pinterest">
        
        <a href="#" title="Pinterest">
            <i class="icon icon-pinterest"></i>
            <span>Pinterest</span>
        </a>
    
    </div>

    <div class="botao-rs whatsapp">
        
        <a href="#" title="whatsApp">    
            <i class="icon icon-whatsapp"></i>
            <span>whatsApp</span>
        </a>
    
    </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar os Botões com css

.botao-rs{

    padding:1em;
    border-radius:100vw;
    display:inline-flex;
    margin:0.5em;
    color:#ffffff;
    width:auto;

}

.botao-rs a { 

    text-decoration:none; 
    color:#fff; 
    display: inherit;

}

.instagram{
    
   background:hsl(0 0% 10%);
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);

}

.facebook{
  background:#3b5998;
}

.twitter{
  background:#1DA1F2;
}

.whatsapp{
  background:#15cc31;
}

.pinterest{
  background:#e60023;
}

.botao-rs:hover{
  cursor:pointer;
}

.botao-rs i { 

    width: 25px;
    height: 25px;
    line-height: 31px;
    font-size: 1.5em;

}

.botao-rs span{

  display:inline-block;
  white-space: nowrap;
  width:0px;
  overflow:hidden;
  transition:350ms ease;
  
}

.botao-rs:hover span{

  width:100px;
  margin-left:0;

}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando