Como Estilizar Links através de class com Css

Neste artigo veja Como Estilizar Links através de class com Css

O que é Link?

Link é a função do HTML que permite inserir os hiperlinks em diversos elementos, como textos e imagens. Um link precisa sempre apontar para uma URL ou seja, um endereço existente em seu site.

Caso contrário, você poderá obter uma mensagem de erro 404, ou apontar para qualquer página ou site externo.

Você pode clicar em um link e apontar para outro documento.

“Quando você mover o mouse sobre um link, a seta do mouse se transformará em uma mãozinha. Um link não precisa ser texto pode ser imagem ou icones”

Vamos adicionar o Html:

<p class="margin-bottom-20px">
    Link normal sem Css<br>
    <a href="#">Saiba mais...</a>
</p>

<p class="margin-bottom-20px">
    Link com class css ( <b>.link-verde ) COM underline</b> <br> 
    <a href="#" class="link-verde">Saiba mais...</a>
</p>

<p class="margin-bottom-20px">
    Link com class css ( <b>.link-laraja ) SEM underline</b> <br> 
    <a href="#" class="link-laranja">Saiba mais...</a>
</p>

<p class="margin-bottom-20px">
    Link com class css ( <b>.link-rosa ) Com  hover preto underline</b> <br> 
    <a href="#" class="link-rosa">Saiba mais...</a>
</p>

<p class="margin-bottom-20px">
    Link com class css ( <b>.link-azul ) Com  Transição hover </b> <br> 
    <a href="#" class="link-azul">Saiba mais...</a>
</p>

Vamos Adicionar o Css:

/*Links*/
.margin-bottom-20px { margin-bottom:20px; }

.link-verde { color:#10b610; text-decoration:underline; font-family:'open_sansbold'; }

.link-laranja { color:#ff8400; text-decoration:none; font-family:'open_sansbold'; }

.link-rosa { color:#f96daf; text-decoration:none; font-family:'open_sansbold'; }
.link-rosa:hover { text-decoration:underline; color:#555555; }

.link-azul { color:#41adeb; transition:0.3s; text-decoration:underline; font-family:'open_sansbold'; }
.link-azul:hover { color:#555555; text-decoration:none; }

Viu como estilizar links através de class com Css é fácil e reutilizável.

Veja o Resultado!

Baixar Código Veja Funcionando