Como estilizar links usando CSS?

Links são entidades que indicam novos locais. Esses hiperlinks ou links desempenham um papel vital em sites quando você deseja que seus usuários visitem outro conteúdo disponível online. Estes denotam conteúdo disponível no mesmo site ou conteúdo disponível em outros sites. Agora sabemos o quão significativo é fazer com que seu site pareça visualmente agradável, portanto, o estilo de hiperlinks é tão importante quanto estilizar qualquer outro elemento em seu site. Você deve estar pensando em como fazer isso. Bem, mantenha -se apertado porque este post o guiará tudo sobre links de estilo.

Como estilizar links?

Links ou hiperlinks em um site podem ser estilizados usando várias propriedades CSS. Os links de estilo podem incluir a alteração de sua cor, tamanho da fonte, família de fontes, etc.

Exemplo
Suponha que você queira que um hiperlink em seu site tenha um estilo ousado e sua cor deve ser verde. Use a seguinte parte do código.

Saída

A cor e o peso da fonte do link foram alterados com sucesso.

Links de estilo de acordo com os estados

Os links exibidos em um site têm estados diferentes e podem ser estilizados com base em seu estado atual. Os diferentes estados que um link pode ter são;

A: Link (um link que ainda não foi visitado pelo usuário)

A: Visitado (um link que foi visitado pelo usuário)

A: Passe o mouse (O estado do link quando um cursor do mouse é movido sobre o link)

A: ativo (O estado do link quando o usuário clica no link)

Os links de estilo de acordo com seus estados são necessários porque eles permitem que o usuário entenda a condição de um link e impeça o usuário de enfrentar qualquer confusão.

Exemplo
Use o seguinte snippet de código para estilizar links no seu site de acordo com o estado deles.

Saída

1. Quando o link ainda não é visitado pelo usuário.
   
2. Quando o usuário visita o link.
   
3. Quando o usuário traz o mouse sobre o link.
   
4. Quando o usuário clica no link.
   

Observação: Ao denominar vários links, mantenha a ordem acima mencionada para que seus links se comportem de acordo. Suponhamos que você estilize o mouse primeiro, em vez de Styling visitado, então o estilo definido para visitado substituirá o estilo de pairar e esta é uma situação que se deve evitar.

Como remover o sublinhado padrão dos hperlinks

Por padrão, há um sublinhado nos links em um site que às vezes pode ser indesejado. Você pode se livrar do sublinhado de links usando a propriedade de decoração de texto do CSS. O snippet de código a seguir mostra como pode ser feito.

No exemplo acima, o sublinhado padrão está sendo removido de um link não visitado, definindo o valor da propriedade de decoração de texto como "nenhum". Você pode usar o trecho de código acima para remover um sublinhado de outros estados de um link também.

Saída

O sublinhado padrão é removido com sucesso do link não visitado.

Links como botões

Às vezes, os links de texto usuais que aparecem em um site podem ser chatos; portanto, para torná -los mais atraentes, você pode fazer com que os links apareçam como botões em seu site. Fazer links como botões utiliza várias propriedades CSS, como preenchimento, borda, cor de fundo, etc.

O exemplo abaixo ilustra como você usa links como botões.

No trecho de código acima, um link está sendo exibido como um botão. Os estados não visitados e visitados do botão estão sendo estilizados de maneira diferente dos estados pairar e ativos do link.

Saída

1. O estado não visitado e visitado do link do botão.
   
2. Os estados pairar e ativos do link do botão.
   

Um link em todos os seus estados foi projetado com sucesso como um botão.

Conclusão

Links de estilo ou hiperlinks em um site são tão importantes quanto estilizar qualquer outro elemento. Para fins de links de estilo, várias propriedades CSS são usadas, como cor, cor de fundo, família de fontes, estilo de fonte, etc. Os links também podem ser estilizados de acordo com seus estados que não são visitados, visitados, pairar e ativos, além disso, para aprimorar a aparência dos links que aparecem em sites, você pode usar links como botões. Este artigo discute como links de estilo usando CSS em profundidade com a ajuda de exemplos apropriados.