Aprenda a fazer o efeito hover nos seus ícones

Olá galera!! Meu nome é Karoline mas prefiro que me chamem de Ka ou Karol. Vou ser a nova colaboradora do blog e vou postar dicas de HTMLdicas para o layout do seu blogtutoriais no photofiltre e photoshop

Espero que gostem pois vou preparar tudo com muito carinho, assim como preparo para o meu! O primeiro post de hoje vai ser bem simples, porém muita gente quer fazer e não sabe como: Efeito hover em ícones de redes sociais, ícones de categorias e etc. Para quem não sabe ainda o que é, o efeito hover é aquele que a pessoa passa o mouse por cima do ícone e ele muda de cor ou tem algum efeito diferente.


 Primeiro passo é fazer ou ter os ícones salvos no computador. Como esses:

Sim, repetido e de cores diferentes. O efeito hover é isso! Muda quando passa o mouse por cima do ícone. E o mais importante: Tem que estar do mesmo tamanho, pois se estiverem de tamanhos diferentes não vai funcionar legal L

Agora é só hospedar todos eles em um site e copiar esse link disponibilizado pelo site:

Feito isso, guarde os links em um bloco de notas. E organize! Para não se perder na hora de editar no html:

- Agora é só ir em Layout > Adicionar um Gadget > HTML/JavaScript e usar o código que disponibilizei para download , junto com vários ícones feitos por mim :) É só substituir os dizeres:

LINK DA SUA LINDA REDE SOCIAL= o link do seu face, do seu twitter...
LINK DA IMAGEM DO SEU ÍCONE NORMAL= como o nome ja diz, é o ícone quando ninguém esta passando o mouse por cima da imagem
LINK DA IMAGEM DO SEU ÍCONE HOVER= para obter o efeito, tem que colar a outra imagem aqui.


Observações: O "link da imagem do seu ícone normal" se repete mesmo! E claro, você tem que colar o código inteiro umas 5 ou 6 vezes e substituir... Pois cada um representa uma rede social diferente. Assim:

Espero que tenham gostado dos ícones e aceito sugestões para o próximo post! Beijos

4 comentários:

  1. Adorei o tuto!
    Beijos

    http://distractionsofaagirl-oficial.blogspot.com.br/

    ResponderExcluir
  2. Esse efeito é lindo demais ♥ sempre dá um "tchan" nos ícones normaizinhos, eu amo! Tutorial muito válido, útil e maravilhoso.

    ResponderExcluir
    Respostas
    1. ebaaa!! Que bom que gostou Tati <3
      fico mt mt feliz com seu comentário

      Excluir

Sinta-se à vontade para comentar. Nós amamos!