Efeito hover em links


Oi gente. Falta um seguidor para o sorteio *--* estou muito feliz. Já ia dormir, mas pensei em postar um tuto antes: Esse tuto é de como deixar os links em efeito hover e sem aquela bendita bordinha "reta" eu acho feinha, me julguem e sim, uma tracejada. exemplo:
Vamos ver?

Vá em seu HTML, aperte Ctrl + F e procure por a:link {, logo abaixo, terá o seguinte código:
a:link {

text-decoration:none;

color: $(link.color);
}
a:visited {
text-decoration:none;
color: $(link.visited.color);
}
a:hover {
text-decoration:none;
color: $(link.hover.color);
}
Apague todo esse trecho e substitua por:
a:link {
color: #CÓDIGODACOR; /* 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: #CÓDIGODACOR; /*Cor dos links visitados*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}
a:hover {
color: #CÓDIGODACOR; /*Cor do link quando passa o mouse*/
border-bottom: 1px dashed #CÓDIGODACOR; /*Cor da bordinha tracejada*/
text-decoration: none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
Aí, é só alterar o que está em sublinhado pelo código da cor que deseja para cada função. Vou passar uma "tabela de cores" para vocês escolherem a vontade. (x) E pronto. Agora vou dormir u_u
~ Kisses

10 comentários:

  1. eu usava no meu layout antigo acho bem fofo............

    bjkas e bom domingão........

    http://louca-por-html.blogspot.com.br/

    ResponderExcluir
  2. Espero que o seguidor chegue logo ;3
    Adorei o tuto.

    Beijos da Lets | Vida de uma SONE

    ResponderExcluir
  3. Seja quem for essa pessoa siga logo :3
    Amo esse tuto, sempre uso nos meus lays.

    anainstant.blogspot.com

    ResponderExcluir
    Respostas
    1. Awn *--* hushaush
      eu também ^^ obrigada pelo comentário o/

      Excluir
  4. Nah, eu usava no lay antigo, acho lindo *--*

    ResponderExcluir
  5. Eu conheço, claro. Mas é mega útil para os novatos na blogo, ;3

    ResponderExcluir

Regras:
-Aceito críticas, porém, comentários ofensivos/maldosos serão apagados.
-Não aceito mais: Seguindo, segue de volta?
-Coloque o link de seu Blog no fim do comentário, é garantido que irei visita-lo e dependendo do conteúdo, até posso segui-lo :3
-Comente a vontade!