ícones de Redes Sociais em html e css

Botão Html e Css Efeito 3D

Botões de Redes Sociais com Html e Css Simples

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

Neste artigo veja como estilizar ícones de Redes Sociais em html e css.

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 <div>, <a> e a tag <i> para inserirmos os ícones.

Essa tag que usaremos para criar os nossos ícones 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 ícones.

Estrutura Código Html:

HTML

    <!--INSIRA ESTE LINK NO </head> DA SUA PÁGINA HTML-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
   
    <div class="social">

        <a href="#" target="_blank">
          <i class="fab fa-facebook-f"></i></i>
        </a>

        <a href="#" target="_blank">
          <i class="fab fa-instagram"></i>
        </a>

        <a href="#" target="_blank">
          <i class="fab fa-twitter"></i>
        </a>
        
        <a href="#" target="_blank">
          <i class="fab fa-youtube"></i>
        </a>

        <a href="#" target="_blank">
          <i class="fab fa-pinterest"></i>
        </a>

    </div><!--Social-->

Estrutura Código CSS

Para conseguirmos o efeito desejado nos icones, 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 ícones.

CSS

.social {

  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  font-size: 28px;

}

.social a {

  color: #2D1F28;
  text-decoration: none;
  margin: 10px;

}

.social:hover a {

  opacity: 0.3;
  transition: 0.5s;

}

.social:hover a:hover {

  opacity: 1;
  transition: 0.5s;

}

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

Veja o Resultado baixo!