Botões de Redes Socias com Efeito Reflexo

Botão Html Tooltip

Botão Html Efeito Leque com Css

Postado: 28 de dezembro de 2023 Tempo de Leitura: 2 Minutos

Olá Nerd, neste artigo vamos criar Botões de Redes Socias com Efeito Reflexo com Html e Css. mesmo com pouco conhecimento na área do desenvolvimento web.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para o botão 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>, <i> e á tag <a> para inserirmos o link de destino.

Essas tags que usaremos para criar o nosso Botões de Redes Socias com Efeito Reflexo com 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

    <div class="btn-social">
        
        <a href="#">
            <i class="icon icon-facebook bg-facebook"></i>
        </a>
    
    </div>

    <div class="btn-social">
        
        <a href="#">
            <i class="icon icon-twitter bg-twitter"></i>
        </a>
    
    </div>

    <div class="btn-social">
        
        <a href="#">
            <i class="icon icon-instagram bg-instagram"></i>
        </a>
    
    </div>

    <div class="btn-social">
        
        <a href="#">
            <i class="icon icon-youtube bg-youtube"></i>
        </a>
    
    </div>

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 de Redes Sociais.

CSS

.btn-social {

  position: relative;
  border: none;
  margin: 10px;
  float: left;
  background-color: transparent;

}

.btn-social a {
  
  width: 80px;
  height: 80px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(2px);
  transition: 0.5s;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.1);

}

.btn-social a:hover {
  transform: translateY(-5px);
}

.btn-social a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: skewX(45deg) translateX(150px);
  transition: 0.8s ease;
}

.btn-social a:hover::before {
  transform: skewX(45deg) translateX(-150px);
}

.bg-facebook { 

  width: 45px;
  height: 45px;
  border-radius: 50px;
  background: #3b5998;
  color: #fff;
  line-height: 50px;
  font-size: 22px;

}

.bg-instagram { 

  width: 45px;
  height: 45px;
  border-radius: 50px;
  background: #f26798;
  color: #fff;
  line-height: 50px;
  font-size: 22px;

}

.bg-twitter { 

  width: 45px;
  height: 45px;
  border-radius: 50px;
  background: #3cf;
  color: #fff;
  line-height: 50px;
  font-size: 22px;

}

.bg-youtube { 

  width: 45px;
  height: 45px;
  border-radius: 50px;
  background: #dc4a38;
  color: #fff;
  line-height: 50px;
  font-size: 22px;

}

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

Veja o Resultado baixo!