Tutorial - Personalizando hover dos Links

 

Yoo !

 

Vou mostrar pra vocês como personalizar o hover dos links . Vocês já visitaram blogs que quando você passa o mouse no link, fica com um sublinhado pontilhado, não ?

Vou mostrar como se aplica esse tipo de hover .

Fácil, fácil . 

 

1. Vá até Design > Editar HTML e procure por:

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);

}

2. De a:hover até } é o que você vai editar . Abaixo da linha color, antes do } cole:

border-bottom: 1px dashed #000000;

 3. Entendendo o código:

1px - A grossura da sua linha, quanto maior o número, mais grossa .

Dashed - É o tipo da linha . Você pode usar dotted, que seriam as linhas com os pontinhos. Pode também usar Solid, que é a linha normal .

#000000 - Cor da sua linha, mude para a que desejar .

Esse código é um código simples, você pode usar para várias coisas (:  Por exemplo, se quiser que o link fique assim e não só quando passa o mouse, faça o mesmo com a:link até }

Prontinho (: