Botão 3D com Css3

Neste tutorial veja como fazer um Botão 3D com Css3, Fácil e rápido

A melhor forma que temos de criar um botão personalizado para um site, que tenha compatibilidade com todos os navegadores, é utilizando uma imagem.

Porém, em muitos casos podemos criar o mesmo botão apenas com CSS3. O que torna a manutenção e a personalização muito mais fáceis e práticas, além de ser muito mais leve.

Vamos Adicionar o HTMl:

<a href="#" class="btn btn-laranja">Html5</a>
<a href="#" class="btn btn-preto">Jquery</a>
<a href="#" class="btn btn-azul">Css3</a>
<a href="#" class="btn btn-preto"><i class="icon icon-code"></i> Back-end</a>
<a href="#" class="btn btn-azul"><i class="icon icon-code"></i> Front-end</a>
<a href="#" class="btn btn-laranja">SEO</a>

Vamos Adicionar o CSS:

.btn:focus, .btn::-moz-focus-inner{outline:none; border:none;}
.btn{
  
  font-family:'open_sansregular';
  font-size:1em;
  border:none;
  padding:0.6em 1.5em;
  cursor: pointer;
  display:inline-block;
  text-decoration: none;
  border-radius:6px;
  transition: all .1s linear;
}


.btn-laranja{ 

    background-color:#ff6c00; 
    color:#fff; 
    box-shadow:0 6px 0 #e16102;

}

.btn-laranja:hover{ 

    background:#ff6c00; 
    box-shadow:0 6px 0 #e16102;

}

.btn-laranja:active{ background:#ff8f00; box-shadow: 0 0px 0 #ff6c00; transform: translateY(6px); }

.btn-preto{ 

    background:#182029;  
    color:#fff; 
    box-shadow:0 6px 0 #405062;

}

.btn-preto:hover{ 

    background:#182029; 
    box-shadow:0 6px 0 #405062;

}

.btn-preto:active{ background:#405062; box-shadow: 0 0px 0 #405062; transform: translateY(6px); }

.btn-azul{ 

    background:#0191e8; 
    color:#fff; 
    box-shadow:0 6px 0 #0075bb;

}

.btn-azul:hover{ 

    background:#0191e8; 
    box-shadow:0 6px 0 #0075bb;

}

.btn-azul:active{ background:#0681cc; box-shadow: 0 0px 0 #d20000; transform: translateY(6px); }

Veja o código Funcioando a baixo:

Baixar Código Veja Funcionando