Criando botões animados em 3D com efeito “press” com CSS3

Esse efeito, lógico, funciona apenas em todos os navegadores com suporte ao CSS3. Infelizmente para os navegadores que não suportam ou até mesmo nas versões de navegadores que não suportam, não veremos o efeito.

Veremos nesse artigo como usar alguns dos novos recursos impressionantes do CSS3 para criarmos um botão tridimensional.

Vamos adiantar as coisas e criar um link que vai se transformar em nosso botão. Você pode fazer isso em um <input> ou <button>, mas vou usar um elemento <a>

1
<a href=“#” class=“button”>Press Me</a>

Agora, podemos começar a adicionar o CSS. Vou começar com um estilo rápido para chegar a nossa forma com uma cor básica para o botão.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
font-family: Helvetica, Arial, sans-serif;
background: #d6d6d6;
text-align: center;
padding: 50px 0px;
}
.button {
display: inline-block;
text-decoration: none;
color: #fff;
font-weight: bold;
background-color: #538fbe;
padding: 20px 70px;
font-size: 24px;
border: 1px solid #2d6898;
}

Ok. Não criamos nada estravagante até agora. Apenas um botão agradável e grande e estiloso com pouco CSS. Agora, vamos usar um pouco de CSS3 para adicionar algum estilo novo, começando por gradientes.

Gradiente CSS

A sintaxe para gradientes CSS3 pode ser um pouco complexa inicialmente, portanto para este artigo, iremos usar um gerador de código para criar degradê. Vá para um gerador de degradê CSS (Ou qualquer outro gerador que encontrar no google) e defina duas cores para 0 e 100, usando o controle deslizante.

Em seguida, use essas cores para criar o seu gradiente #609bcb e #4a85b5. O erro mais comum dos novos designers é fazer com que os efeitos gradientes tornem-se bastante óbvios. Vamos melhorar isso acrescentando um sutil efeito de canto arredondado. E só!

Isso vai gerar um código que você poderá colar em seu estilo de botão.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.button {
display: inline-block;
text-decoration: none;
color: #fff;
font-weight: bold;
background-color: #538fbe;
padding: 20px 70px;
font-size: 24px;
border: 1px solid #2d6898;
background-image: linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
background-image: -o-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
background-image: -moz-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
background-image: -ms-linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(73,132,180)),
color-stop(1, rgb(97,155,203))
);
}

Em seguida, devemos adicionar um estilo hover. Eu gosto de “iluminar” os botões nesse evento. Para isso, crie outro gradiante, um pouco mais brilhante do que o primeiro. Em seguida, acrescente na pseudo-classe.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.button:hover {
background-image: linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
background-image: -o-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
background-image: -moz-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
background-image: -ms-linear-gradient(bottom, rgb(79,142,191) 0%, rgb(102,166,214) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(79,142,191)),
color-stop(1, rgb(102,166,214))
);
}

Essas bordas podem não ficar boas. Vamos usar a propriedade border-radius.

1
2
3
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Essas três linhas vão arredondar os cantos do botão em um raio de 5px. N!ao cometa o erro de criar um valor grande para o raio dos cantos, pois o aspecto do botão ficará estranho. Lembre-se, estamos dando toques sutis em nosso botãozinho.

Note que temos prefixos -webkit-e-moz-. Isso permitirá que versões mais antigas desses navegadores “enxerguem” corretamente a propriedade border-radius do seu botão.

Introdução ao Shadow

Para melhorar o texto, sinto a necessidade de usar um shadow (sombra) para criar um efeito de “embutido”.

usaremos muito o shadow nesse botão, então, preste bastante atenção aqui.

Todas as sombras CSS seguem o mesmo formato. Veja o exemplo:

1
text-shadow: 0px  -1px 0px rgba(0,0,0,.5);

Ou este outro exemplo:

1
text-shadow: x-offset y-offset blur color;

Note que há apenas um espaço entre cada um dos valores. Estas propriedades simplesmente permitem que você crie todos os tipos de efeitos. O código acima é o que vamos adicionar ao nosso botão para dar ao etxto uma aparência “rebaixada”.

Agora, usando caixas de sombras que seguem a mesma sintaxe, quero acrescentar mais alguns detalhes.

Primeiro, vamos adicionar um efeito 3D.

1
2
3
-webkit-box-shadow: 0px 6px 0px #2b638f;
-moz-box-shadow: 0px 6px 0px #2b638f;
box-shadow: 0px 6px 0px #2b638f;

Agora, a sombra sólida faz com que o botão pareça estar “suspenso”. Mas para adicionar o efeito, precisamos de uma sombra real que seria lançada a partir do botão para a base.

Felizmente, podemos adicionar diversas sombras, acrescentando vírgula entre cada uma como abaixo:

1
2
3
-webkit-box-shadow: 0px 6px 0px #2b638f0px 3px 15px rgba(0,0,0,.4);
-moz-box-shadow: 0px 6px 0px #2b638f0px 3px 15px rgba(0,0,0,.4);
box-shadow: 0px 6px 0px #2b638f0px 3px 15px rgba(0,0,0,.4);

Assim, a sombra terá um deslocamento no eixo X de 0px, no eixo Y um deslocamento de 3px e um botão de 15px. A cor RGB nos permite usar transparência em nossas sombras. Isso é realmente importante para dar um tom natural nesse efeito.

 

Adicionando mais Shadow

Normalmente, não usamos shadow em boxes para destacarmos determinado elemento, mas ele funciona muito bem para isso. Box-shadow aceita um valor de inserção que fará com que a sombra “entre” no elemento, e não na parte externa.

1
box-shadow: inset 0px 1px 0px rgba(255,255,255,.3);

Eu estou usando um branco parcialmente transparente para criar um bom destaque ao longo da borda superior do botão. Mas quero realçar mais o botão com um bom contorno nítido em torno do elemento.

1
box-shadow: inset 0px 0px 3px rgba(255,255,255,.5);

Para trabalhar com todas essas sombras, precisamos de uma única declaração como esta:

1
2
3
-webkit-box-shadow: 0px 6px 0px #2b638f0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
-moz-box-shadow: 0px 6px 0px #2b638f0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
box-shadow: 0px 6px 0px #2b638f0px 3px 15px rgba(0,0,0,.4), inset 0

sso parece complicado, mas são apenas 4 sombras separadas por vírgulas, repetidas 2 vezes para diferentes navegadores.

Nosso código até o momento estará como esse:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.button {
    display: inline-block;
    text-decorationnone;
    color#fff;
    font-weightbold;
    background-color#538fbe;
    padding20px 70px;
    font-size24px;
    border1px solid #2d6898;
    background-image: linear-gradient(bottomrgb(73,132,1800%rgb(97,155,203100%);
    background-image: -o-linear-gradient(bottomrgb(73,132,1800%rgb(97,155,203100%);
    background-image: -moz-linear-gradient(bottomrgb(73,132,1800%rgb(97,155,203100%);
    background-image: -webkit-linear-gradient(bottomrgb(73,132,1800%rgb(97,155,203100%);
    background-image: -ms-linear-gradient(bottomrgb(73,132,1800%rgb(97,155,203100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0rgb(73,132,180)),
        color-stop(1rgb(97,155,203))
    );
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow0px -1px 0px rgba(0,0,0,.5);
    -webkit-box-shadow: 0px 6px 0px #2b638f0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
    -moz-box-shadow: 0px 6px 0px #2b638f0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
    box-shadow: 0px 6px 0px #2b638f0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
}

Efeito Press Me

Primeiro, quando o botão é pressionado, eu quero que o gradiente do fundo mude. Criei um gradiente sutil que contrasta com o gradiente padrão do botão. Ele mudará a cor sutilmente, tornando o botão um pouco mais claro.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.button:active {
    background-image: linear-gradient(bottomrgb(88,154,2040%rgb(90,150,199100%);
    background-image: -o-linear-gradient(bottomrgb(88,154,2040%rgb(90,150,199100%);
    background-image: -moz-linear-gradient(bottomrgb(88,154,2040%rgb(90,150,199100%);
    background-image: -webkit-linear-gradient(bottomrgb(88,154,2040%rgb(90,150,199100%);
    background-image: -ms-linear-gradient(bottomrgb(88,154,2040%rgb(90,150,199100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0rgb(88,154,204)),
        color-stop(1rgb(90,150,199))
    );
}

Em seguida, precisamos reformular um pouco as sombras para um efeito de “Sair da base”. A sombra com fundo sólido necessita encurtar a maneira em que o botão parece pressionado. Em seguida, a sombra borrada precisa se tornar menos, uma vez que o botão menor teria uma sombra menor.

1
2
3
-webkit-box-shadow: 0px 2px 0px #2b638f0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
-moz-box-shadow: 0px 2px 0px #2b638f0px 1px 6px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
box-shadow: 0px 2px 0px #2b638f0px 1px 6px rgba(0,0,0,.4), inset 0px

Olhe para as duas primeiras sombras e em cada declaração para se ter uma ideia do movimento e mudança do evento. As duas sombras inseridas são as mesmas.

Movendo o botão

Nós precisamos também “mover” o botão para baixo pelo mesmo número de pixels que encurtamos nossa sombra (neste caso, 4px). Caso contrário, vai parecer que a sombra ficou mais curta, em vez do botão ser pressionado.

Para fazer isso, vamos usar a propriedade de transformação.

1
2
3
-webkit-transform: translate(04px);
-moz-transform: translate(04px);
transform: translate(04px);

Isso irá mover o botão para baixo em 4px quando pressionado.

Adicionando animação

Agora, se você pressionar o botão ele vai ser empurrado para baixo, mas isso acontece instantaneamente. Podemos facilmente animar entre essas duas posições, utilizando transições em CSS3. Em nosso estilo principal do botão, adicione o seguinte:

1
2
3
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

Isso vai animar as duas posições do evento do botão (animar as sombras). Essa é a palavra chave: “all”. 0,2 significa que eu quero que toda animação dure 0,2 segundos. E ease-in-out refere-se ao tempo da animação.

Agora, pressionando o botão, você observa que o botão é pressionado e caso você tire o mouse do botão, ele retorna ao estado original.

Mais 3D

Podemos tornar isso mais interessante, usando mais efeitos 3D. Para fazer isso, primeiro precisamos adicionar perspectiva para o elemento pai, neste caso, o body.

1
2
3
4
body {
    
    -webkit-perspective: 400;
}

Como é essa propriedade é experimental, estamos adicionando apenas para navegadores com suporte webkit.

1

Agora, o botão realmente parece tridimensional. Mas precisamos adicionar rotateX(20deg)  ao estado a:active do botão. O código final deverá ser parecido com este:

1
2
3
-webkit-transform: translate(04px) rotateX(20deg);
-moz-transform: translate(04px);
transform: translate(04px);

Fonte: http://www.mxmasters.com.br/artigo/criando-botoes-animados-em-3d-com-efeito-press-com-css3/

Deixe um comentário