Ir para homeMateus Souza – Webdesigner

Icones em menus usando CSS – Tutorial CSS

Criado por Mateus Souza em 30 de agosto de 2008 às 17:39

Demonstração / Download dos arquivos

Simples, limpo e agradável.Este é o tutorial que ensinarei a vocês hoje:

Etapa 1: Código do HTML

Você pode criar esse tipo de botões usando esta estrutura simples: um link (tag <a>) com uma tag span interior, desta forma:

<a href="#" class="button">
    <span class="add">Add aos Favoritos</span>
</a>

Faça isso com todos os botões que deseja criar. No nosso exemplo ficará assim:

    <a href="#" class="button">
    <span class=“delete“>Deletar Favoritos</span>
    </a>

    <a href="#" class="button">
    <span class=“user“>Add seus amigos</span>
    </a>
    ….

    <a href="#" class="button">
    <span class=“info“>Você necessita de ajuda?</span>
    </a>

Etapa 2: As imagens:

Nesse caso usei as imagens deste set(Proxal Icon Set v2), mais vc pode usar qualquer uma, é so dar o caminho da imagen. Ex:

.add{
    background:url(Link da imagem aqui) no-repeat 10px 8px;
    text-indent:30px;
    display:block;
}

Etapa 3: Código do CSS

Este é o código CSS para todos os botôes, como fundo, forma como o botão  é (fonte, largura, altura,… ):

a.button {
    background : url(img/button.gif) ; background: url (img / button.gif);
    display : block ; display: block;
    color : #555555 ; color: # 555555;
    font-weight : bold ; font-weight: negrito;
    height : 30px ; altura: 30px;
    line-height : 29px ; line-height: 29px;
    margin-bottom : 14px ; margin-bottom: 14px;
    text-decoration : none ; text-decoration: none;
    width : 191px ; width: 191px;
}
a:hover.button{ um: hover.button (
    color : #0066CC ; color: # 0066CC;
}

E este é o CSS de cada botão em particular:

/* ——————– */
/* CLASSES */
/* ——————– */
.add{
    background:url(img/add.gif) no-repeat 10px 8px;
    text-indent:30px;
    display:block;
}
.delete{
    background:url(img/delete.gif) no-repeat 10px 8px;
    text-indent:30px;
    display:block;
}
.user{
    background:url(img/user.gif) no-repeat 10px 8px;
    text-indent:30px;
    display:block;
}
…

Lembrando que o segredo é esse, usando a classe <span>, observe:

<a href="#" class="button">
    <span class="add">Add aos Favoritos</span>
</a>

<span class=”add”></span>(observe que o nome desta classe é add) que será o mesmo usando no CSS, acrecentado um .(ponto) antes do add:

.add{
    background:url(img/add.gif) no-repeat 10px 8px;
    text-indent:30px;
    display:block;
}

É muito facil, bastar por em pratica e analizar o código.Espero que tenham gostado e até a próxima.

Postado em Tutoriais

Feed Comentários - RSS 2.0 | Trackback

Gostou? Então compartilhe já: