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.

6 respostas

  1. Gostaria saber se pode me ajudar foi feito atualização magento 1.7 para 1.9.1.1 só que
    seu problema ficou meio atualizado fiz backaup através do sistema/ferramentas/backaup
    como devo proceder para restaurar esses dados / se puder me ajudar aguardo seu retorno

    1. Oi, pra essa situação eu não uso o backup no admin, eu faço eu mesmo uma copia de toda a loja pra um arquivo zip e copio todo o banco de dados, dessa forma eu posso restaurar a loja do jeito que era antes sem nenhuma perda. Além disso eu faço a atualização em um ambiente de testes
      no caso você pode tentar clicar na opção restaurar dos backups (veja que o magento faz backup do sistema, das imagens e do banco de dados em locais direrentes), mesmo assim eu não dou garantia de que a loja volte ao que era antes

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Sair da versão mobile