Efeito Fade no Link

{tremenda verdadii *--*}

Oiiiiêê caramelos salgaduús! alguém aí já viu um link tipo esse aqui? ele muda de cor aos poucos... e isso se chama: Fade. Vamos aprender?

Mais é claro que no seu template já deve conter algum código que deixa os links coloridos, por isso você procurar por:

a:link {
  text-decoration:none;
  color: $(link.color);
}
a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}
a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

Agora, substitua este código pelo código abaixo:

a:link {
color: #E9A1C0;
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}
a:visited {
color: #33CCCC;
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070;
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}

• Rosa: Cor sem passar o mouse;
• roxo: Cor dos links visitados; 
• verde: Cor ao passar o mouse;
• Laranja: Quanto maior o número (0.8s, 0.9s [...]) mais lento será o fade de cores. Quanto menor (0.6s, 0.5s [...]) mais rápido será a transição das cores.

ATENÇÃO! Os links da sidebar vão ficar sem esse efeito, para fazer ele funcionar procure por e apague todo o código abaixo.

.sidebar .widget a:link {
  color: $(widget.link.color);
  text-decoration: none;
}
.sidebar .widget a:visited {
  color: $(widget.link.visited.color);
}
.sidebar .widget a:hover {
  color: $(widget.link.color);
  text-decoration: underline;
} 

Faça as modificações necessárias e visualize, se estiver tudo certo, salve! 

---Bônus---

                                              

                                                

hihi, fofinhos não?