Carregando...

Botões de Redes Sociais com Html e Css Simples

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

Botões de Redes Sociais com Html e Css Simples

Botões de Redes Sociais com Html e Css Simples

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:

     <!--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.

.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!

Botões de Redes Sociais com Html e Css Simples

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como estilizar Botões de Redes Sociais com Html e Css Simples. existem diversas formas de estilizar os Botões com efeitos, cores, formas e animações diferentes.

Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.

A imaginação é mais importante que o conhecimento. O conhecimento é limitado, enquanto a imaginação abraça o mundo inteiro, estimulando o progresso, dando à luz à evolução.– (Albert Einstein)

Publicado por: Loop Nerd

84 Visualizações

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Artigos Relacionados