Links de Redes Sociais Animado

Links de Redes Sociais Animado

Neste tutorial vamos criar um conjunto de Links de Redes Sociais Animado.

Nesta seção, projetaremos uma estrutura simples na tag <ul>, <li> , <span> , <i> e a <a> para inserir o link de destino. 

Essas são as tags que usaremos para criar os nossos Links de Redes Sociais.

Vamos Adicionar o HTML

    <ul>

      <li>
        <a class="facebook" href="#">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <i class="icon icon-facebook" aria-hidden="true"></i>
        </a>
      </li>

      <li>
        <a class="instagram" href="#">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <i class="icon icon-instagram" aria-hidden="true"></i>
        </a>
      </li>

      <li>
        <a class="twitter" href="#">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <i class="icon icon-twitter" aria-hidden="true"></i>
        </a>
      </li>

      <li>
        <a class="pinterest" href="#">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <i class="icon icon-pinterest" aria-hidden="true"></i>
        </a>
      </li>

    </ul>

Vamos Adicionar o CSS

Nesta seção, usaremos algumas propriedades CSS para estilizar os nossos Links de Redes Sociais.

ul {

    display: flex;
    margin: auto;
    max-width: 250px;
    background-color: #fff;
    padding: 5px;
    border-radius: 4px;

}

ul li { list-style:none; }

ul li a {

    display: block;
    position: relative;
    width: 50px;
    height: 50px;
    line-height: 55px;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
    background-color: #404040;
    color: #fff;
    margin: 0 5px;
    transition: .5s;
    border-radius: 4px;
    overflow: hidden;

}

ul li a:hover { background-color: #f2f2f2; }

ul li a span {
  position:absolute;
  transition: transform .5s;
}

ul li a span:nth-child(1),
ul li a span:nth-child(3){
  width:100%;
  height:2px;
  background:#404040;
}

ul li a span:nth-child(1) {
  top:0;
  left:0;
  transform-origin: right;
}

ul li a:hover span:nth-child(1) {
  transform: scaleX(0);
  transform-origin: left;
  transition:transform .5s;
}

ul li a span:nth-child(3) {
  bottom:0;
  left:0;
  transform-origin: left;
}

ul li a:hover span:nth-child(3) {
  transform: scaleX(0);
  transform-origin: right;
  transition:transform .5s;
}

ul li a span:nth-child(2),
ul li a span:nth-child(4){
  width:2px;
  height:100%;
  background:#404040;
}

ul li a span:nth-child(2) {
  top:0;
  left:0;
  transform:scale(0);
  transform-origin: bottom;
}

ul li a:hover span:nth-child(2) {
  transform: scale(1);
  transform-origin: top;
  transition:transform .5s;
}

ul li a span:nth-child(4) {
  top:0;
  right:0;
  transform:scale(0);
  transform-origin: top;
}

ul li a:hover span:nth-child(4) {
  transform: scale(1);
  transform-origin: bottom;
  transition:transform .5s;
}

.facebook:hover {
  color: #3b5998;
}

.facebook:hover span { 
  background-color: #3b5998;
}

.twitter:hover {
  color: #1da1f2;
}

.twitter:hover span { 
  background-color: #1da1f2;
}

.instagram:hover {
  color: #ea1f75;
}

.instagram:hover span { 
  background-color: #ea1f75;
}

.pinterest:hover {
  color: #c8232c;
}

.pinterest:hover span { 
  background-color: #c8232c;
}

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

Veja o Resultado baixo!

Baixar Código Veja Funcionando