Efeito 3D em botões com CSS

Nenhum produto encontrado nessa seleção.

Neste tutorial, vamos utilizar HTML e CSS para criar um efeito 3D para os botões do nosso layout. Criaremos botões simples para uma interface clean e visualmente atraente aos olhos de nossos clientes. Quando qualquer botão for pressionado, vamos simular o mesmo efeito que um botão de verdade faria, afundar; quando soltar, ele voltará ao normal.

Veja o exemplo dos botões que vamos criar abaixo:

See the Pen 3D Button – Only HTML and CSS by Luiz Otávio Miranda Figueiredo (@luizomf) on CodePen.

São botões bastante simples, mas que trazem um efeito comum atualmente. Além disso, eles têm um layout bastante clean, e podem receber a cor que você preferir.

Então, vamos aprender como criar este efeito?

Criando efeito 3D em botões com CSS

Este efeito poderá ser incluído em qualquer elemento que possa se transformar em um botão, dentre eles: button, a e input. Então vamos começar nosso código, criando os três elementos mencionados:

<button class="btn btn-green">Salvar</button>
<a href="#" class="btn btn-purple">Acessar</a>
<input type="submit"  class="btn btn-red" value="OK">

No exemplos acima, os três “botões” têm algo em comum, a classe btn. Essa classe será uma espécie de padrão para todos os botões, e dará apenas um formato inicial para os mesmos.

Veja suas propriedades e valores:

.btn{
  font-family: arial;
  font-size:14px;
  font-weight:700;
  text-transform: uppercase;
  border:none;
  padding:10px;
  cursor: pointer;
  display:inline-block;
  text-decoration: none;
}

As quatro primeiras linhas, são especificamente ligadas ao estilo da fonte:

  • font-family  – A família da fonte;
  • font-size – O tamanho da fonte em pixels;
  • font-weight – O peso da fonte (negrito);
  • text-transform – O estilo das letras (neste caso, todas maiúsculas).

As outras propriedades estão ligadas com algumas coisas diferentes:

  • border: none – Remove todas as bordas do botão;
  • padding: 10px – Da um enchimento de 10px em todos os lados do botão;
  • cursor: pointer – Garante que aquela “mão” apareça, quando o usuário estiver com o mouse sobre o botão;
  • display: inline-block – Garante que tanto os links como os botões tenham a mesma altura;
  • text-decoration: none – Remove a linha sob o texto dos links.

O problema aqui é que só a classe btn não será capaz de criar o nosso botão. Ela até poderia, mas nesse caso, você se encontraria copiando e colando a mesma coisa em todos os botões do seu CSS.

Por este motivo, para cada cor de botão, teremos uma nova classe, que, no meu caso, estou utilizando o nome btn-nomedacor.

Suponhamos que eu queira um botão verde, então a minha classe secundária será btn-green.

Na classe btn-green iremos configurar todos os estados do botão: normal, :hover (mouse sobre) e :active (botão pressionado).

Veja mais sobre isso em: Seletores CSS avançados.

Para meu estado normal, tenho as seguintes propriedades e valores:

.btn-green{
  background:green;
  color:#fff;
  box-shadow:0 5px 0 #006000;
}

Que fazem o seguinte:

  • background:green – Configura o fundo do botão para verde;
  • color: #fff – Configura a cor do texto para branco;
  • box-shadow: 0 5px 0 #006000 – Cria um espécie de borda de 5px na parte de baixo do botão. Perceba que a cor da borda (#006000) deve ser um pouco mais escura do que a cor de fundo do botão.

No estado de :hover (mouse sobre), vou alterar apenas a cor de fundo e a cor da sombra inferior.

.btn-green:hover{
  background:#006000;
  box-shadow:0 5px 0 #003f00;
}

Agora o background do botão será a mesma cor da sombra do estado normal, e a sombra passa a ser ainda mais escura.

Exemplo - Hover

Para nossa pseudo-classe :active, vamos remover a borda inferior e fazer com que o botão desça 5px. Isso fará com que ele tenha um efeito de pressionar.

.btn-green:active{
  position:relative;
  top:5px;
  box-shadow:none;
}

Exemplo - :active

Pronto, agora você pode colocar as cores que você quiser, como preferir.

Vídeo tutorial: Efeito 3D em botões com CSS

Também criei um vídeo tutorial para que você possa entender como fazer, assista abaixo:

É bem simples!

O código de exemplo completo

Caso queira utilizar a forma mais fácil possível, basta copiar o colar o código abaixo no seu projeto:

O HTML

<button class="btn btn-green">Salvar</button>
<a href="#" class="btn btn-purple">Acessar</a>
<input type="submit"  class="btn btn-red" value="OK">

O CSS

.btn:focus, .btn::-moz-focus-inner{
  outline:none;
  border:none;
}
.btn{
  font-family: arial;
  font-size:14px;
  text-transform: uppercase;
  font-weight:700;
  border:none;
  padding:10px;
  cursor: pointer;
  display:inline-block;
  text-decoration: none;
}
.btn-green{
  background:green;
  color:#fff;
  box-shadow:0 5px 0 #006000;
}
.btn-green:hover{
  background:#006000;
  box-shadow:0 5px 0 #003f00;
}
.btn-purple{
  background:purple;
  color:#fff;
  box-shadow:0 5px 0 #670167;
}
.btn-purple:hover{
  background:#670167;
  box-shadow:0 5px 0 #470047;
}
.btn-red{
  background:red;
  color:#fff;
  box-shadow:0 5px 0 #d20000;
}
.btn-red:hover{
  background:#d20000;
  box-shadow:0 5px 0 #b00000;
}
.btn-green:active, .btn-purple:active, .btn-red:active{
  position:relative;
  top:5px;
  box-shadow:none;
}

Simples assim!