Rollover simples com CSS

Neste post vou mostrar como podemos fazer um rollover simples usando apenas CSS.

Iremos usar para este exemplo apenas uma tag a simples.

Exemplo funcionando.

Primeiro passo: vamos criar nossa imagem que será usada para fazer este efeito, como por exemplo a imagem a seguir.

Imagem Rollover
Note que a primeira parte da imagem será usado como o primeiro estado do rollover, ou seja, quando o mouse não estiver sobre o link. E o segunda será usada quando o mouse estiver sobre o link.

Usamos os dois estados em uma única imagem para deixar a imagem em cache.

Segundo passo: o código do nosso link

Túlio Faria.net 

Agora vamos ao “pulo do gato”, com CSS:

#botao{

display: block;

width: 150px;

height: 150px;

}

Terceiro passo: vamos mostrar o link como um bloco com largura de 150x150px, não mais como um elemento inline, para isso:

#botao{
display: block;
width: 150px;
height: 150px;
}

Quarto passo: colocar a imagem de fundo:

#botao{
display: block;
width: 150px;
height: 150px;
background: url(2006_07_27_rollover.jpg);
}

Quinto passo: legal, mas o texto ficou em cima do meu botão, tudo bem, vamos tira-lo. Vamos usar uma técnica de image replacement usando text-indent, colocando esse valor absurdo (-1000px) o texto será levado para fora do bloco do link, sumindo da tela. O text-decoration: none, apenas para garantir que não irá aparecer o sublinhado em alguns browsers.

#botao{
display: block;
width: 150px;
height: 150px;
background: url(2006_07_27_rollover.jpg);
text-indent: -1000px;
text-decoration: none;
}

Sexto passo: vamos fazer o efeito de quando o mouse passar o mouse sobre o link, onde usaremos a propriedade background-position para deslocar a imagem de fundo 0 px para a direita e 150px para baixo. (inicialmente estes valores são 0 e 0)

#botao:hover{
background-position: 0px 150px;
}

Com o background position fazemos com que a área visível seja a segunda parte da imagem como ilustrado abaixo, onde a área visível é a área destacada. (150px para baixo)

Rollover
Exemplo funcionando.

Espero que tenham gostado, dúvidas? Comentem. Até a próxima.

1 Comment

  1. Tulio goste do tutorial mais sera que nao ficou faltando nenhu outro codigo pq o meu nao esta mudando a imagen.

Deixe uma resposta