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

Botões de Redes Sociais Efeito Flutuante

Article Html Efeito Hover Css

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

Neste artigo vamos criar Botões de Redes Sociais com Animação Efeito Vertical 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-5">

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

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

    <li>
        <a href="#">
            <div class="icone-box-youtube cor-horizontal">
                <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-color:#517fa4;
  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;
}

/* COR-HORIZONTAL */

.cor-horizontal {

  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #fff;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  color: #515151;

}

.cor-horizontal:before {

  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /*background: #000;*/
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;

}

.back-5 li:first-child .cor-horizontal:before {
  background-color: #3b5998;
}

.back-5 li:nth-child(2) .cor-horizontal:before {
  background-color: #517fa4;
}

.back-5 li:nth-child(3) .cor-horizontal:before {
  background-color: #00aced;
}
.back-5 li:nth-child(4) .cor-horizontal:before {
  background-color: #dd4b39;
}

.cor-horizontal:hover, .cor-horizontal:focus, .cor-horizontal:active {
  color: white;
}
.cor-horizontal:hover:before, .cor-horizontal:focus:before, .cor-horizontal:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

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

Veja o Resultado baixo!