Botões de Redes Sociais Efeito Flutuante

Menu de Navegação com Flexbox Css

Botões de Redes Sociais Animação Efeito Vertical

Postado: 24 de março de 2025 Tempo de Leitura: 2 Minutos

Neste artigo vamos criar Botões de Redes Sociais Efeito Flutuante estilizado com Css. ao passar o mouse sobre o elemento html as animações inicia conforme programado e estilizado nos Códigos Css de cada Botão.

Estrutura Base que vamos usar no projeto!

A estrutura base do nosso pequeno projeto para projetar o Botão vai ser composta 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>, <div>,<i> e a tag <a> para inserirmos o texto.

Essas tags que usaremos para criar os Botões de Redes Sociais.

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

<ul class="box-social back-4">

    <li>
        <a href="#">
            <div class="icone-box-facebook sombra-base">
                <i class="fa fa-facebook" aria-hidden="true"></i>
            </div>
        </a>
    </li>

    <li>
        <a href="#">
            <div class="icone-box-instagram sombra-base">
                <i class="fa fa-instagram" aria-hidden="true"></i>
            </div>
        </a>
    </li>
    
    <li>
        <a href="#">
            <div class="icone-box-twitter sombra-base">
                <i class="fa fa-twitter" aria-hidden="true"></i>
            </div>
        </a>
    </li>

    <li>
        <a href="#">
            <div class="icone-box-youtube sombra-base">
                <i class="fa fa-youtube" aria-hidden="true"></i>
            </div>
        </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.

Insira o link dos ícones da font-awesome no head da sua página

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

Nesta seção, usaremos algumas propriedades CSS para estilizar os Botões Css com o efeito desejado.

CSS

.box-social    { 

  margin: auto;
  display: table;

}

.box-social li {  

  float:left; 
  text-align:center; 
  margin: 5px;

}

.fa {
  font-size: 32px !important;
  margin-top: 23%;
}

.icone-box-facebook {
  width: 53px;
  height: 53px;
  background-color:#3b5998;
  color: #fff;
}

.icone-box-instagram {
  width: 53px;
  height: 53px;
  background:hsl(0 0% 10%);
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  color:#fff;
}

.icone-box-twitter {
  width: 53px;
  height: 53px;
  background-color:#00aced;
  color: #fff;
}

.icone-box-youtube {
  width: 53px;
  height: 53px;
  background-color:#dd4b39;
  color:#fff;
}

/* SOMBRA BASE */

.sombra-base {

  display: inline-block;
  position: relative;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  border-radius: 50px;

}

.sombra-base:before {

  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  transition-duration: 0.3s;
  transition-property: transform opacity;

}

.sombra-base:hover        { transform: translateY(-6px); }
.sombra-base:hover:before { opacity: 1; transform: translateY(6px); }

/* FIM SOMBRA BASE */

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

Veja o Resultado baixo!