Desenvolvimento - CSS

Botão com CSS 3: Como criar um botão sem imagens

Neste tutorial iremos ver como criar um botão com css3, abolindo o uso de imagens para criar botões personalizados.

por Anderson Weschnhoski


Ainda 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.

Vou ensinar logo abaixo como fazer um botão com CSS3. Ele até poderia ser animado com jquery, ou alguma outra biblioteca javascript, mas a ideia é mostrar as possibilidades do CSS.

Previa final do botão

Figura 1: Prévia final do botão

HTML

Abaixo vamos criar o nosso documento HTML, dentro do body não teremos nada demais, além de uma div que vai posicionar o elemento na tela, e um link que vai ser nosso botão.

Listagem 1: Código HTML

<html>
<head>
    <title>Botão com CSS3</title>
</head>
<body>
    <div class="content">
   	 <a href="#" class="botao01">Botao</a>
    </div>
</body>
</html>

Para colocarmos todos esses efeitos no botão, vamos usar dois pseudo-elementos, o :after e o :before. Esses dois são utilizados com a propriedade “content”, porém, neste momento não precisamos saber exatamente como funciona seu comportamento, na verdade mais pra frente eu falo melhor sobre isso.

Agora vamos começar a estilizar o nosso botão com CSS:

Listagem 2: Primeira parte do CSS

<html>
<head>
   <title>Botão com CSS3</title>
</head>
<style>
.botao01{
   	 background: -webkit-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 background: -moz-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 background: -o-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 background: -ms-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 background: linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 border: 1px solid #CCCCCE;
   	 border-radius: 3px;
   	 box-shadow: 0 3px 0 rgba(0, 0, 0, .3),
   		           0 2px 7px rgba(0, 0, 0, 0.2);
   	 color: #616165;
   	 display: block;
   	 font-family: "Trebuchet MS";
   	 font-size: 14px;
   	 font-weight: bold;
   	 line-height: 25px;
   	 text-align: center;
   	 text-decoration: none;
   	 text-transform: uppercase;
   	 text-shadow:1px 1px 0 #FFF;
   	 padding: 5px 15px;
   	 position: relative;
   	 width: 80px;
    }
</style>
<body>
    <div class="content">
   	 <a href="#" class="botao01">Botao</a>
    </div>
</body>
</html>

Com esse primeiro bloco de CSS, já definimos boa parte da forma do botão. Não têm muito segredo, apenas duas coisas em quê você deve manter a atenção, no background, onde usei um linear-gradient que ainda é algo novo para alguns navegadores, e o box-shadow. Neste ultimo, são duas sombras, então deve se separar com uma vírgula cada valor.

Agora vamos trabalhar com os pseudo-elementos :after e :before. Com eles vamos conseguir colocar mais alguns estilos no botão sem ter que criar outro elemento, como uma div ou span.

Listagem 3: Segunda parte do CSS, inclusão dos pseudo-elementos

<html>
<head>
    <title>Botão com CSS3</title>
</head>
<style>
.botao01{
   	 background: -webkit-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 background: -moz-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 background: -o-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 background: -ms-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 background: linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 border: 1px solid #CCCCCE;
   	 border-radius: 3px;
   	 box-shadow: 0 3px 0 rgba(0, 0, 0, .3),
   		           0 2px 7px rgba(0, 0, 0, 0.2);
   	 color: #616165;
   	 display: block;
   	 font-family: "Trebuchet MS";
   	 font-size: 14px;
   	 font-weight: bold;
   	 line-height: 25px;
   	 text-align: center;
   	 text-decoration: none;
   	 text-transform: uppercase;
   	 text-shadow:1px 1px 0 #FFF;
   	 padding: 5px 15px;
   	 position: relative;
   	 width: 80px;
}

.botao01:before{
   	 border: 1px solid #FFF;
   	 border-radius: 3px;
   	 box-shadow: inset 0 -2px 12px -4px rgba(70, 70, 70, .2),
   		           inset 0 3px 2px -1px rgba(255, 255, 255, 1);
   	 content: "";
   	 bottom: 0;
   	 left: 0;
   	 right: 0;
   	 top: 0;
   	 padding: 5px;
   	 position: absolute;
    }

    .botao01:after{
   	 background: rgba(255, 255, 255, .4);
   	 border-radius: 2px;
   	 content: "";
   	 bottom: 15px;
   	 left: 0px;
   	 right: 0px;
   	 top: 0px;
   	 position: absolute;
    }
 
</style>
<body>
    <div class="content">
   	 <a href="#" class="botao01">Botao</a>
    </div>
</body>
</html>

Para fazermos o uso deles, temos que utilizar a propriedade content, ela adiciona conteúdo dentro de um elemento via CSS, é muito útil. E para que os peseudo-elementos “existam” é necessário que tenha alguma coisa dentro deles, por isso temos que usá-la.

Contendo essa propriedade podemos colocar os estilos. O :before, usamos para colocar duas sombras internas e mais uma borda na cor branca. No :after, é onde tem o style que faz aquele efeito espelhado.

No próximo passo vamos colocar um efeito de clique, como se o botão estivesse abaixando quando clicamos em cima dele.

Segue o código logo abaixo:

Listagem 4: Terceira parte do CSS, efeito do click

<html>
<head>
    <title>Botão com CSS3</title>
</head>
<style>
.content{
   	 margin: 30px;
    }
.botao01{
   	 background: -webkit-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 background: -moz-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 background: -o-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 background: -ms-linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 background: linear-gradient(bottom, #E0E0E0, #F9F9F9 70%);
   	 border: 1px solid #CCCCCE;
   	 border-radius: 3px;
   	 box-shadow: 0 3px 0 rgba(0, 0, 0, .3),
   		           0 2px 7px rgba(0, 0, 0, 0.2);
   	 color: #616165;
   	 display: block;
   	 font-family: "Trebuchet MS";
   	 font-size: 14px;
   	 font-weight: bold;
   	 line-height: 25px;
   	 text-align: center;
   	 text-decoration: none;
   	 text-transform: uppercase;
   	 text-shadow:1px 1px 0 #FFF;
   	 padding: 5px 15px;
   	 position: relative;
   	 width: 80px;
}

.botao01:before{
   	 border: 1px solid #FFF;
   	 border-radius: 3px;
   	 box-shadow: inset 0 -2px 12px -4px rgba(70, 70, 70, .2),
   		           inset 0 3px 2px -1px rgba(255, 255, 255, 1);
   	 content: "";
   	 bottom: 0;
   	 left: 0;
   	 right: 0;
   	 top: 0;
   	 padding: 5px;
   	 position: absolute;
    }

    .botao01:after{
   	 background: rgba(255, 255, 255, .4);
   	 border-radius: 2px;
   	 content: "";
   	 bottom: 15px;
   	 left: 0px;
   	 right: 0px;
   	 top: 0px;
   	 position: absolute;
    }
 .botao01:active{
   	 box-shadow: inset 0 0 7px rgba(0, 0, 0, .2);
   	 top: 4px;
    }
    .botao01:active:before{
   	 border: none;
   	 box-shadow:none;
    }
</style>
<body>
    <div class="content">
   	 <a href="#" class="botao01">Botao</a>
    </div>
</body>
</html>

Aqui colocamos um estilo para quando o botão receber um click. Removemos as sombras externas, inclusive aquela que dá a impressão de que o botão está saltado, e o movemos um pouco para baixo, para dar a impressão de que ele está afundando.

E pra finalizar inserimos uma margin na div content, pra dar um espaçamento entre o botão e as bordas do browser. Nada que modifique o elemento diretamente.

Esse é um exemplo de uma estilização de um simples botão com css, as possibildades são imensas e a sua criatividade é o limite.

Finalizo aqui este tutorial, se alguém estiver com alguma dúvida pode usar a área de comentários ou me enviar um email: andersonweschnhoski@gmail.com
Anderson Weschnhoski

Anderson Weschnhoski - Trabalho com PHP e MySQL, CSS, javascript, jQuery, manjo um pouco de Ajax, tenho um bom domínio sobre Wordpress e algumas técnicas de SEO. Como disse, também tenho uma pequena experiência de 2 anos com blogs.