Botões de Redes Sociais Efeito 3D

Botão Html e Css Para Loja Virtual

Botão Html e Css Efeito de Duas Camadas

Postado: 7 de fevereiro de 2024 Tempo de Leitura: 3 Minutos

Neste artigo veja como fazer Botões de Redes Sociais Efeito 3D. este botão nos permite inserir ícones e o link desejado para cada rede social.

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 <ul>, <li>, <a>, e a tag <i> para inserirmos o ícone da Respectiva Rede social.

Essa tag que usaremos para criar o nossos Botões.

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 do Botão.

Estrutura Código Html:

HTML

    <ul class="botoes-social">
      
        <li class="social-item facebook">
        
            <a class="social-link" href="#">
             <i class="icon icon-facebook"></i>
            </a>
        
        </li>
        
        <li class="social-item instagram">
        
            <a class="social-link" href="#">
             <i class="icon icon-instagram"></i>
            </a>
        
        </li>

        
        <li class="social-item twitter">
        
            <a class="social-link" href="#">
              <i class="icon icon-twitter"></i>
            </a>
        
        </li>
        
        <li class="social-item youtube">
         
            <a class="social-link" href="/">
              <i class="icon icon-youtube-alt"></i>
            </a>
        
        </li>

    </ul>

Estrutura Código CSS

Para conseguirmos o efeito desejado no botão, 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.

CSS

.botoes-social {
  margin: 0;
  list-style: none;
  padding-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.botoes-social .social-item {
  margin: 0 30px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.botoes-social .social-item .social-link {
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 45px;
  display: block;
  justify-content: center;
  align-items: center;
  background: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 22px;
  transform: perspective(1000px) rotate(-30deg) skew(25deg)
  translate(0, 0);
  transition: all 0.4s ease;
}

.botoes-social .social-item .social-link::before {
  content: "";
  position: absolute;
  top: 5px;
  left: -10px;
  height: 100%;
  width: 10px;
  background: #d0d0d0;
  transition: all 0.4s ease;
  transform: rotate(0deg) skewY(-45deg);
}

.botoes-social .social-item .social-link::after {
  content: "";
  position: absolute;
  top: 40px;
  left: -5px;
  height: 10px;
  width: 100%;
  background: #a1a1a1;
  transition: all 0.4s ease;
  transform: rotate(0deg) skewX(-45deg);
}

.botoes-social .social-item .social-link:hover {
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(5px, -5px);
  box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);
}

/*Facebook*/
.botoes-social .social-item.facebook a               { color: #3b5999; }
.botoes-social .social-item.facebook:hover a         { background: #3b5999; }
.botoes-social .social-item.facebook:hover a::before { background: #33466f; }
.botoes-social .social-item.facebook:hover a::after  { background: #27385c; }

/*instagram*/
.botoes-social .social-item.instagram a               { color: #e4405f; }
.botoes-social .social-item.instagram:hover a         { background: #e4405f; }
.botoes-social .social-item.instagram:hover a::before { background: #bc2f4a; }
.botoes-social .social-item.instagram:hover a::after  { background: #801e31; }

/*twitter*/
.botoes-social .social-item.twitter a               { color: #55acee; }
.botoes-social .social-item.twitter:hover a         { background: #55acee; }
.botoes-social .social-item.twitter:hover a::before { background: #3a88c2; }
.botoes-social .social-item.twitter:hover a::after  { background: #2e6c9a; }

/*youtube*/
.botoes-social .social-item.youtube a               { color: #dd4b39;}
.botoes-social .social-item.youtube:hover a         { background: #dd4b39; }
.botoes-social .social-item.youtube:hover a::before { background: #bc3a2a;}
.botoes-social .social-item.youtube:hover a::after  { background: #913529; }

.botoes-social .social-item .social-link:hover { color: #ffffff; }

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

Veja o Resultado baixo!