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:

www.carloshps.com.br/blog/como-criar-botoes-com-css-e-icones/

Estes ícones foram disponibilizados gratuitamente pelo seu autor, Creative 9 Design.

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 href="#" class="botao"><span class="home">Página Inicial</span></a>
<a href="#" class="botao"><span class="usuario">Cadastrar Usuário</span></a>
<a href="#" class="botao"><span class="email">Verificar E-mail</span></a>
<a href="#" class="botao"><span class="calendario">Agendar Compromisso</span></a>
<a href="#" class="botao"><span class="senha">Senha de Acesso</span></a>
<a href="#" class="botao"><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;
}

Para ver o resultado final e Pegar o código-fonte, clique no link abaixo:

www.carloshps.com.br/blog/como-criar-botoes-com-css-e-icones/

Até a próxima, pessoal.

CarlosHPS Webdesigner