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).

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).

Está é a imagem original a ser usada:


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:

O melhor celular intermediário para importar?

Conteúdo relacionado

Realme GT Master: Celular Premium da marca chega ao Brasil; confira preços e ficha
Celulares

Realme GT Master: Celular Premium da marca chega ao Brasil; confira preços e ficha

Lançado dia 19 de outubro de 2021 no Brasil, o Realme GT Master Edition chega para ser o carro-chefe de tecnologias da fabricante.

Chefe da Ericsson critica proibição sueca do 5G da Huawei
Mercado Tech

Chefe da Ericsson critica proibição sueca do 5G da Huawei

Borje Ekholm diz que a ação contra seu rival prejudica a livre concorrência e o comércio.

Ericsson comprará Cradlepoint, empresa de rede sem fio dos Estados Unidos, por US $ 1,1 bilhão
Tecnologia

Ericsson comprará Cradlepoint, empresa de rede sem fio dos Estados Unidos, por US $ 1,1 bilhão

Foi anunciado hoje pela Ericsson que a empresa realizou a compra da companhia de redes sem fio dos EUA Cradlepoint. Confira quais são as intenções por trás.