Efeitos em links com CSS

Retirando o sublinhado

Normalmente, por padrão, os links são sublinhados e na cor azul. Por esse motivo é comum atribuirmos um efeito para retirada do sublinhado e a troca da cor azul por outra qualquer. 
Esse efeito pode ser facilmente obtido através da seguinte sintaxe:

<style type="text/css">
           a:link {text-decoration: none}
           a:visited {text-decoration: none}
           a:hover {text-decoration: none; }
           a:active {text-decoration: none}
</style>

Adicionando sublinhado e trocando a cor

Podemos também adicionar o sublinhado e trocar a cor apenas no estado hover do link (quando você passa o mouse sobre ele).
Esse efeito pode ser facilmente obtido através da seguinte sintaxe:

<style type="text/css">

           a:hover {text-decoration: underline; color: #FF0000;}
          
</style>

Trocando a cor de fundo e do texto

Podemos trocar a cor do testo e a cor de fundo do link também no estado hover (quando você passa o mouse sobre o link)
Esse efeito pode ser facilmente obtido através da seguinte sintaxe:

<style type="text/css">

           a:hover {color: #FFF; background-color:#000;}
          
</style>

Aumentando o tamanho da fonte

Podemos aumentar o tamanho da fonte no estado hover do link (quando você passa o mouse sobre ele).
Esse efeito pode ser facilmente obtido através da seguinte sintaxe:

<style type="text/css">

           a:hover {font-size:16px; }
          
</style>