quinta-feira, 9 de janeiro de 2014

Tutorial - Como fazer button com hover

Este é um pequeno truquezinho que é muito fácil e aprendi num blog ao acaso, utilizei na página de downloads (nos buttons para as animes) e estou pensando usar em todas as páginas de ligações.


Aqui está o projeto finalizado:(exemplo)
http://kokiridream.blogspot.pt/2013/12/review-chuu-bra.html

-Para fazer isto basta fazer duas imagens, (a que pretende que apareça no estado normal e a quando passa o rato por cima) pode usar photoshop, photoscape, gimp... e não precisa ser redondo faça como quiser.
 - Depois use um site para hospedagem de imagens por exemplo o tumblr (x)
- E finalmente, na página onde quer postar o button vá em html e escreva:

<img src="ENDERECO_DA_IMAGEM_NORMAL" onmouseout="this.src='ENDERECO_DA_IMAGEM_NORMAL';" onmouseover="this.src='ENDERECO_DA_IMAGEM_AO_PASSAR_O_MOUSE';" />

ou se quiser use o gadget de html para postar seu button diretamente no blog.

Sem comentários:

Enviar um comentário