Botões de redes sociais com html e css

Botões de redes sociais com html e css

Neste tutorial vamos fazer botões de redes sociais com html e css.

Nesta seção, projetaremos uma estruturas básica no html. 

Usaremos A Tag <div>,<i> e a tag <a> para inserirmos o link de destino.

Essas são as tags que usaremos no html

Vamos Adicionar o Html

   <div class="box-social">

       <a href="#" class="btn-social btn-hover"> <i class="icon icon-facebook"></i> </a>
       <a href="#" class="btn-social btn-hover"> <i class="icon icon-instagram"></i> </a>
       <a href="#" class="btn-social btn-hover"> <i class="icon icon-twitter"></i> </a>
       <a href="#" class="btn-social btn-hover"> <i class="icon icon-pinterest"></i> </a>

   </div>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para projetar os nossos botães de redes sociais.

.box-social {

  flex-wrap: wrap; 
  display: flex;
  justify-content: center;
  gap: 10px;

}

.btn-social {

  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  text-decoration: none;
  background: #4c4c4c;
  text-align: center;

}

.btn-social::after {

  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  display: block;
  width: 0;
  height: 0;
  border-radius: 100%;
  transition: 0.4s;

}

.btn-social:hover { color:#242424; }

.btn-social:hover::after {
  
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  margin-left: calc(-50% - 1px);

}

.btn-social i {

  position: relative;
  z-index: 1;
  transition: 0.4s;
  font-size: 20px;
  line-height: 35px;
  height: 30px;

}

.btn-hover        { color: #fff; }
.btn-hover::after { background: #5be1e5; }

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando