Botão 3D Css

Botão 3D Css

Como fazer efeito 3D no CSS?

Para criar um cubo 3D com CSS, usaremos a propriedade transform para posicionar cada lado do cubo em três dimensões. A propriedade transform recebe como valor algumas funções que transformam o posicionamento e a forma de um elemento com CSS.

Vamos Adicionar o Html

Nesta seção, projetaremos uma estrutura simples na tag <a> aplicando a class=”btn-3d” dentro da tag <a> de link, vamos inserir o href para incluirmos o link.

   <a href="#" class="btn-3d" text="Leia mais" title="Leia mais">
      Leia mais
   </a>

Vamos Adicionar o Css

Nesta seção, usaremos algumas propriedades CSS3 para projetar o efeito de 3D usaremos a propriedade transform para posicionar cada lado do cubo em três dimensões.

.btn-3d {

  position: relative;
  display: inline-block;
  font-size:1.2em;
  text-align: center;
  color: #04b5be;
  font-family: sans-serif;
  font-weight: bold;
  padding: 20px 80px;
  transform: perspective(500px);
  cursor: pointer;
  color: transparent;

}

.btn-3d:before, .btn-3d:after {

  content: attr(text);
  display: block;
  width: 100%;
  height: calc(100% - 20px);
  border: 4px solid #04b5be;
  position: absolute;
  top: 0;
  left: -5px;
  padding: 20px 0 0;
  transition: 0.3s all;
  color: #04b5be; 
  background-color:#fff;
  border-radius:5px;

}

.btn-3d:before {

  transform: perspective(500px) rotateX(0) translateY(0);
  transform-origin: 50% 0;
  color:04b5be;

}

.btn-3d:after {

  transform: perspective(500px) rotateX(-90deg) translateY(100%);
  transform-origin: 50% 100%;
  background: #04b5be;
  color: #ffffff;

}

.btn-3d:hover:before {

  transform: perspective(500px) rotateX(90deg) translateY(-100%);

}

.btn-3d:hover:after {

  transform: perspective(500px) rotateX(0) translateY(0);

}

Nesta seção, combinaremos as duas seções acima para criar O Botão 3D, Utilizando HTML + CSS.

Código Completo Veja o Resultado! 

Baixar Código Veja Funcionando