Rollover de imagem com CSS

Neste tutorial vou mostrar a você como fazer um rollover de imagem usando css. O efeito pode ser feito com Javascript, porém para que ele fique perfeito você terá que criar duas imagens a normal e a com o mouse sobre o botão, já com o css você cria apenas uma imagem e apenas muda a posição do background (fundo).

Por | @nmuller99 Programação
Neste tutorial vou mostrar a você como fazer um rollover de imagem usando css. O efeito pode ser feito com Javascript, porém para que ele fique perfeito você terá que criar duas imagens a normal e a com o mouse sobre o botão, já com o css você cria apenas uma imagem e apenas muda a posição do background (fundo).

Está é a imagem original a ser usada:
Rollover de imagem com CSS

Como você pode ver esta imagem, tem os dois botões, o verde e o vermelho, é uma imagem única que vou usar como sendo a normal e a rollover.

Veja o código CSS:


Como pode ver acima, quando o mouse estiver sobre o botão ele move o background para 32 px para a esquerda, o que faz com que apareça exatamente a bola vermelho no local da verde.

E o código HTML é super-simples:
 


Como você pode ver o código HTML tem apenas uma linha.

Confira abaixo o resultado:


Mais sobre: css tutoriais rollover
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo

Siga nossas contas no Twitter