Criando botões com CSS3
Nas minhas andanças pela internet tenho me interessado muito nas novidades do CSS3, tanto pela praticidade de fazer as coisas e adaptar para qualquer tipo de situação quanto pela beleza do efeito que melhora e muito a usabilidade de um site ou sistema. Agora vou mostrar como é simples fazer um botão elegante em CSS3.
Inicialmente vamos precisar de uma imagem de fundo para dar um efeito de botão, para isso usaremos uma imagem PNG-24 transparente como um efeito de reflexo comum bem simples, vale lembrar que se tratando de PNG você precisa utilizar um PNG-FIX para o IE6 (Isso claro se você ainda se importar com ele).
Vocês vão perceber que para os efeitos de sombras usei o RGBA que é a mesma coisa que RGB porém podemos definir a opacidade do efeito (por isso a letra A) desse modo garantimos que o botão fique bonito independentemente da cor que usaremos nele.
Você vai perceber que esta nova técnica do CSS3 permite o uso quase nulo de imagens, mesmo o nosso efeito de transparência pode ser retirado e ainda asism o botão ficar bem legal e sem utilizar imagem alguma, o simples código abaixo cria o efeito que desejamos.
CSS
.botao {
-moz-border-radius:5px 5px 5px 5px;
background:url("fundobotao5.png") repeat-x scroll 0 0 #F09403;
border:1px solid #F89B09;
color:#FFFFFF;
cursor:pointer;
padding:5px 9px;
text-shadow: text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
font-size: 20px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.botao:hover, .botao1:focus, .botao1:active {
background-color: #000;
border:1px solid #000;
}
Agora vamos definir um efeito simples de HOVER que vai fazer o botão mudar de cor quando o usuário passar o mouse por cima deste modo completamos o efeito do botão.
Infelizmente o Internet explorer ainda não suporta o CSS3 portanto o efeito neste navegador não vai ser tão bonito, você pode notar também que o código para o webkit é o mesmo mudando somente a chamada do CSS.
Este código é bem simples e com uns pequenos ajustes é muito simples de implementar ele como o botão padrão em seu CSS e deixar ainda maisbonito suas criações.