Como Criar Botões com CSS e Ícones

Apresentação

Você é daqueles que gosta de criar layouts para websites no estilo “clean”, limpo, leve e simples? Então veio ao local certo

Neste tutorial veremos como estilizar botões com ícones e implementá-los em um código HTML básico com formatação CSS.

Pré-Requisitos

• Ter facilidade em manusear o Fireworks (a partir da versão CS3)
• Ter noções básicas de HTML
• Ter noções básicas de formatação em CSS

Objetivo

Inserir os botões e seus ícones em um código HTML básico e formatando-os com CSS

Conteúdo

Pensando na parte gráfica e no design, primeiramente vamos criar um fundo padrão para os botões para que os mesmos possam receber os ícones. Feito isso, numa página HTML simples, vamos inserir estes botões e com o CSS, formatar os ícones e fontes para que dêem o tão esperado visual “clean”.

1º Passo – Criando o Botão

Vamos desenhar um retângulo (que servirá como imagem de fundo) com as dimensões 200 x 40 px com cantos arredondados e cores pastéis de acordo com a imagem abaixo:

Fig. 01: Criando o fundo do botão no Fireworks

Agora é só exportar em formato gif ou png com fundo transparente para uma pasta destinada a este tutorial.

2º Passo – Download dos Ícones

Para os ícones, utilizaremos as dimensões 24 x 24 pixel, ok?! Basta fazermos o download dos mesmos clicando no link abaixo:

  Download dos Ícones
(188,6 KiB, 889 downloads)
Você precisa ser um usuário registrado e fazer o LOGIN DE ACESSO para completar download deste arquivo. CADASTRE-SE! É de graça ;)

3º Passo – Trabalhando o Código HTML

Para nós que já sabemos o básico do HTML, não necessitaremos de muita coisa não, apenas utilizar esta simples estrutura:

• Um link (tag a)
• Uma tag no interior do link

<a href="#" class="botao"><span class="home">Página Inicial</span></a>

Veja o detalhamento deste código:

Fig. 02: Classes na tag a

O importante a observar que, para cada botão (que terá uma mesma classe para todos), um ícone diferente é definido na tag span através de uma classe única. Obedecendo esta sequência lógica, vamos criar mais alguns botões, utilizando a codificação a seguir:

<a class="botao" href="#"><span class="home">Página Inicial</span></a>
<a class="botao" href="#"><span class="usuario">Cadastrar Usuário</span></a>
<a class="botao" href="#"><span class="email">Verificar E-mail</span></a>
<a class="botao" href="#"><span class="calendario">Agendar Compromisso</span></a>
<a class="botao" href="#"><span class="senha">Senha de Acesso</span></a>
<a class="botao" href="#"><span class="imprimir">Configurar Impressão</span></a>

4º Passo – Trabalhando o Código CSS

Primeiramente, vamos configurar o nosso botão – largura, altura, imagem de fundo, alinhamento, etc:

a.botao {
background: url(imagens/botao.png);
line-height: 40px;
font-weight: bold;
color: #404040;
text-decoration: none;
display: block;
height: 40px;
width: 200px;
margin-bottom: 10px;
}
a:hover.botao {
color: #C00;
}

Lembrando que o “body” foi utilizado para pré-definir as fontes.

E em seguida, para cada botão, vamos configurar um ícone:

/*******************
Classes de cada botão
********************/
/*Botão HOME*/
.home {
background: url(imagens/home.png) no-repeat 9px 8px;
text-indent: 40px;
display: block;
}
/*Botão USUÁRIO*/
.usuario {
background: url(imagens/usuario.png) no-repeat 9px 8px;
text-indent: 40px;
display: block;
}
/*Botão E-MAIL*/
.email {
background: url(imagens/email.png) no-repeat 9px 8px;
text-indent: 40px;
display: block;
}
/*Botão AGENDA*/
.calendario {
background: url(imagens/calendario.png) no-repeat 9px 8px;
text-indent: 40px;
display: block;
}
/*Botão SENHA*/
.senha {
background: url(imagens/acesso.png) no-repeat 9px 8px;
text-indent: 40px;
display: block;
}
/*Botão E-MAIL*/
.imprimir {
background: url(imagens/imprimir.png) no-repeat 9px 8px;
text-indent: 40px;
display: block;
}

O resultado final será este, pessoal:

Pegue o código-fonte, clicando no link abaixo:

  Download do Código-Fonte
(12,0 KiB, 1.496 downloads)
Você precisa ser um usuário registrado e fazer o LOGIN DE ACESSO para completar download deste arquivo. CADASTRE-SE! É de graça ;)

Até a próxima, pessoal.

CarlosHPS Webdesigner

Webtutoriais:61CE45A6