22 de mar de 2014

Efeito hover nos links

Oie gente linda, este vai ser o último post de hoje, porque eu tenho mais coisas pra fazer, por exemplo dormir hahaha. E eu tenho uns avisinhos para dar para vocês. Primeiro, eu estou tentando conseguir afiliações, e por enquanto consegui afiliações com esses dois blogs divos: o Garotas Cupcakes, e o Milk Cake. E se tiver alguém ai querendo afiliados, eu estou aceitando -n
Chega de blá, blá, blá e vamos logo ao post. Eu vou mostrar um tutorial bem simples, que é o do efeito hover nos links. Então bora lá. ☆


 Procure 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);
}
Apague tudo é no lugar cole o seguinte código:
a:link {
color: #E9A1C0; /* Cor do link*/
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; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
Modifique do jeitinho que você preferir. E se você quiser o mesmo efeito nos gadgets, procure por :
.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;
}
Apague e cole no lugar o seguinte código :
a:link {
color: #E9A1C0; /* Cor do link*/
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; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #707070; /*Cor do link quando passa o mouse*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
Então é isso gente, um beijo

2 comentários:

  1. Adorei o tutorial, os links ficam bem mais bonitinhos em hover... Mas, infelizmente não utilizei isso no meu layout atual porque queria algo mais simples <3
    Beijos || Ayla-Chan || ~ Tea Cookie ♥

    ResponderExcluir
    Respostas
    1. Brigada amor, muito lindo o seu lay, eu também não usei porque queria algo diferente hahaha >3<
      Beijoooos

      Excluir