Alguns eventos recentes na minha vida profissional estão me fazendo dar grande foco para a área de programação de interfaces. Por isso, resolvi escrever um post mais prático sobre esse assunto. No post de hoje, vou mostrar como transformar um link HTML (<a></a>) em um botão elegante, estilo Web 2.0, usando algumas das novas propriedades do CSS 3, tais como text-shadow e box-shadow.
Ao final do passo a passo, você deve obter um botão assim:
Primeiro, vamos ver o CSS necessário para dar ao botão a aparência de seu primeiro estado (quando o mouse estiver fora dele).
a.botao-2-0 { display: inline-block; /* elemento tipo block que aceita conteúdo ao seu redor (como um inline) */ width: 200px; /* largura */ height: 40px; /* comprimento */ border: 1px solid black; /* borda de 1px, tipo solid, cor preta */ /* border-radius determina o quão curva é a borda. Para dar suporte a browsers mais a antigos, usamos as notações específicas da engines Webkit (Chrome, Safari) e Gecko (Firefox). Se você não sabe o que é a engine de um browser, veja http://pt.wikipedia.org/wiki/WebKit */ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #FFC75C; /* cor de fundo */ /* box-shadow define a sombra de um elemento. Como primeiro argumento, coloque inset para sombra interna (ignore esse argumento para sombra externa). O primeiro valor define a sombra lateral (inset: valores negativos se referem ao lado direito; para sombras externas, valores negativos se referem ao lado esquerdo); o segundo valor define a sombra vertical (inset: valor negativos se referem à sombra de baixo; para sombra externa, valores negativos se referem à sombra superior). O último argumento é o quão borrada é a sombra; quanto maior o valor, mais larga e fraca a sombra */ -webkit-box-shadow: inset -3px -3px 3px #7F5B14; -moz-box-shadow: inset -3px -3px 3px #7F5B14; box-shadow: inset -3px -3px 3px #7F5B14; text-align: center; /* texto centralizado */ text-transform: uppercase; /* texto em caixa alta */ /* sombras, mas para textos. Aqui, o inset não pode ser usado, a sobra é sempre externa */ -webkit-text-shadow: 1px 1px 2px #7F5B14; -moz-text-shadow: 1px 1px 2px #7F5B14; text-shadow: 1px 1px 2px #7F5B14; letter-spacing: 4px; /* espaçamento entre as letras */ font-weight: 900; /* nível de negrito da fonte */ font-size: 12px; /* tamanho da fonte */ font-family: Orbitron, sans-serif; /* tipo de fonte */ /* Se não houver quebra de linha no conteúdo, colocar a altura da linha igual à altura do elemento é uma maneira fácil de se obter centralização vertical */ line-height: 40px; /* nível de opacidade. .8 = 80% */ opacity: .8; }
Esse código é o suficiente para dar ao botão a aparência do primeiro estado mostrado na imagem do início do post. No entanto, como fazer o botão mudar de estilo quando o mouse estiver sobre ele (ou quando o botão estiver sendo clicado)? Desde o CSS 2, podemos usar pseudo-classes para definir que mudanças de estilo um elemento terá dado o acontecimento de algum evento (como, por exemplo, o ponteiro do mouse sendo posicionado sobre o elemento).
/* Algumas das pseudo-classes disponíveis desde o CSS 2 :link - seleciona links dentro de elementos :visited - seleciona links visitados :focus - o elemento tem o foco na tela :hover - o ponteiro do mouse está sobre o elemento :active - o elemento está ativo (isso geralmente significa o clique do mouse ou o enter do teclado) */ a.botao-2-0:link, a.botao-2-0:visited, a.botao-2-0:focus, a.botao-2-0:hover, a.botao-2-0:active { color: black; text-decoration: none; } /* Quando o elemento estiver em foco (ou com o ponteiro do mouse sobre ele), aumentamos sua opacidade para 100% */ a.botao-2-0:focus, a.botao-2-0:hover { opacity: 1; } /* Quando o botão estiver sendo clicado (ou ativado com o enter) mudamos as sombras da caixa e do texto de forma que ele fique com a aparência de um botão afundado */ a.botao-2-0:active { -webkit-box-shadow: inset 3px 3px 3px #7F5B14; -moz-box-shadow: inset 3px 3px 3px #7F5B14; box-shadow: inset 3px 3px 3px #7F5B14; -webkit-text-shadow: -1px -1px 2px #7F5B14; -moz-text-shadow: -1px -1px 2px #7F5B14; text-shadow: -1px -1px 2px #7F5B14; }
Como explicado nos comentários do código, o segredo para dar a aparência de afundado para o botão é trabalhar com a pseudo-class :active e trocar as sombras internas de posição (de direita e baixo para esquerda e cima). Nesse exemplo, estou usando a fonte Orbitron (Ultra-Bold 900), que pode ser obtida em www.google.com/webfonts. Para conveniência, criei também uma página HTML já com os estilos para o botão. A página de exemplo pode ser baixada clicando aqui (File > Download).
Quaisquer dúvidas ou observações, basta deixar um comentário nesse post mesmo.
Espero que esse tutorial tenha sido útil para vocês. Até a próxima!
Obs: Este tutorial foi testado nos seguintes navegadores: Google Chrome (24.0.1312.57 m), Mozilla Firefox (18.0.1) e Internet Explorer (9.0.8112.16421). No IE, a fonte Orbitron não será carregada (e ocorrerá o fallback para sans-serif), mas isso é assunto para um outro post xD
Marcado:box-shadow, CSS 3, HTML5, text-shadow
Well I really enjoyed reading it. This tip procured by you is very practical for good planning.