Botões de Redes Sociais com Html e Css Simples

ícones de Redes Sociais em html e css

Menu Hover Efeito Linha Ondulada

Postado: 15 de fevereiro de 2024 Tempo de Leitura: 2 Minutos

Neste artigo veja como estilizar Botões de Redes Sociais com Html e Css Simples.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para os ícones vai ser composto por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples nas tags <ul>, <li>, <a> e a tag <i> para inserirmos os ícones da Respectiva Rede Social.

Essa tag que usaremos para criar os nossos Botões de Redes Sociais em html e css.

A primeira coisa que você deve fazer é colocar todas as tags básicas que são essenciais independente de qual projeto esteja sendo desenvolvido.

Nesta seção, usaremos algumas as tags HTML para montar a estrutura dos Botões.

Estrutura Código Html:

HTML

     <!--Insira este link entre as tags <head> do seu html p exibir os icones-->
     <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>    

    <ul class="redes-sociais">

      <li><a href="link" target="_blank"><i class="fa fa-facebook"></i></a></li> 
      <li><a href="link" target="_blank"><i class="fa fa-instagram"></i></a></li>  
      <li><a href="link" target="_blank"><i class="fa fa-twitter"></i></a></li>   
      <li><a href="link" target="_blank"><i class="fa fa-pinterest"></i></a></li>  
      <li><a href="link" target="_blank"><i class="fa fa-whatsapp"></i></a></li>  

    </ul>

Estrutura Código CSS

Para conseguirmos o efeito desejado nos Botões, vamos adicionar algumas propriedades CSS para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

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

CSS

.redes-sociais {
 
  list-style: none;
  display: table;
  margin: 0 auto !important;

}

.redes-sociais li {

  display: inline-block;
  float: left;
  padding: 0;
  margin-right: 10px;

}

.redes-sociais li:last-child { margin-right: 0; }

.redes-sociais li a {

  font-size: 20px;
  display: block;
  text-align: center;
  border-radius: 50px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #5d5d5d;;
  color: #ffffff;
  transition: 0.2s;

}

.redes-sociais li a:hover {
  background: #DC4747;
  color: #FFF;
}

.redes-sociais li a i {
  line-height: 50px !important;
}

.redes-sociais.vertical {
  width: 50px;
}

.redes-sociais.vertical li {
  margin-bottom: 5px;
}

.redes-sociais.vertical li:last-child {
  margin-right: 0;
}

.redes-sociais.vertical li a {
  background: #5d5d5d;;
  color: #ffffff;
}

.redes-sociais.vertical li a:hover {
  background: #DC4747;
  color: #FFF;
}

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

Veja o Resultado baixo!