Como trocar o texto dos links por imagem usando apenas css

Inserir imagens via CSS é bem fácil, mas com um pouco mais de conhecimento é possível fazer coisas muito legais, neste artigo mostrarei como trocar o texto de um link por uma imagem, muito útil para menus e pequenos botões que se repetem frequentemente.

Em outro tutorial ensinei como usar um seletor de atributos do css que insere uma imagem no final ou no começo de um link, caso queira conferir basta clicar e ver em como inserir um ícone no link sem usar uma classe específica.

Aqui o processo é muito semelhante, mas não usaremos as pseudo classes after e before, o truque é remover o texto e no lugar dele inserir uma imagem.

Quer criar temas para Magento?

Exemplo 1 substituir o texto por imagem

Vamos pegar link leia mais >> esconder este texto e no lugar colocar uma imagem estática. Para nosso exemplo usaremos este código HTML:

<a class="readmore" href="#">Leia mais >></a>

E vamos usar uma pequena imagem, repare que temos duas setas no mesmo arquivo, você já vai entender o porquê.

Criaremos a regra css da classe “readmore” assim:

.readmore{
   text-indent:-9999px;
   display:inline-block;
   width:60px;
   height:19px;
   background: url(seta.png) no-repeat 0 0 transparent;
   vertical-align:middle;
}

Assim temos este resultado: Continue lendo>>

Desse jeito o link virou uma imagem, mas mostra somente uma seta, isso porque especifiquei um tamanho menor que a imagem, então a imagem que sobra não aparece. Agora vamos inserir o código para que a imagem mude quando o mouse parar sobre ela.

.readmore:hover{
   background-position: 0 -19px;
}

Assim sempre que o mouse parar sobre o link, a imagem vai mudar, dando a impressão que é outra imagem, como você pode conferir: Continue lendo>>

Não há limite de quantos símbolos pode usar em um mesmo arquivo de imagem, então use este recurso para todos os símbolos da sua página e reduza as requisições do servidor e deixe sua página mais rápida

Espero que tenha gostado desta dica, qualquer dúvida deixe nos comentários, aproveita e curta minha página no Facebook e receba mais dicas.

Um abraço.