Como estilizar links usando CSS: um tutorial detalhado para iniciantes

Neste tutorial, falaremos sobre como estilizar links da Web via CSS. Os links são uma parte central de qualquer site. Eles permitem que você mova os visitantes para outras partes, consulte fontes para sublinhar os pontos que você está fazendo, ajude os leitores a descobrir postagens de blog mais relevantes e muito mais.

Aprender como alterar seu design permite que você tenha certeza de que são reconhecíveis como links e se encaixam no restante do seu site. CSS oferece muitas maneiras e propriedades diferentes para isso, então vamos analisá-los um por um.

Padrões de link e estilo de link padrão

Antes de entrarmos em como fazer alterações no design de seus links, vamos primeiro entender sua composição. Aqui está a aparência de um elemento de link em HTML:

 <a href="https://torquemag.io/">TorqueMag</a>

Como você pode ver, é composto por várias partes:

• <a> – Este é o operador para criar um elemento de link. Por que a ? Porque em HTML, os links também são chamados de tags de âncora .
• href="" – Qualquer coisa entre aspas duplas é para onde este link está apontando. É o endereço em que alguém que clicar nele irá parar.
• TorqueMag – Este é o texto do link que aparece na página, por exemplo, assim (não clique nele, este link não leva a lugar algum).
• </a> – As partes que fecham o elemento do link e informam ao navegador que o texto do link termina aqui.

Até agora, tão fácil.

Qual a aparência do link por padrão

Onde fica interessante é quando você olha para a aparência desse tipo de link na página. Você provavelmente já viu isso antes.

Se você declarar qualquer link antigo em um documento HTML e não fornecer nenhuma informação de estilo, ele assumirá o estilo padrão:

1. O texto do link é azul e o próprio link está sublinhado.
2. Quando você passa o mouse sobre ele, o cursor muda para um pequeno ícone de mão.
3. Quando você clica nele, ele fica vermelho por um segundo.
4. Depois de visitar o link, sua cor mudará para roxo.
5. Quando você navega para o link por meio da tecla tabuladora no teclado, ele terá um contorno azul ao redor.

Esses padrões foram estabelecidos nos primeiros dias da Internet e não mudaram muito desde os anos 90. O engraçado é que, mesmo que você nunca tenha pensado nisso conscientemente, em algum nível você provavelmente estava ciente da maioria dos itens acima apenas navegando na web.

Aprendendo sobre os estados do link

Algo que também se torna óbvio com o que foi dito acima é que os links têm estados diferentes que influenciam sua aparência. Você pode direcioná-los com diferentes pseudoclasses CSS que permitem influenciar seu estilo individual. Estes são:

• a – Esta é a tag âncora acima mencionada. Ele tem como alvo todos os links em todos os estágios.
• a:link – Para o link normal e não visitado. Em termos técnicos, :link tem como alvo todas as tags âncoras que possuem um atributo href . Na verdade, não é muito usado. Muitas pessoas simplesmente usam a , já que as tags âncora sem um atributo href são bastante raras, então geralmente não há necessidade desse tipo de diferenciação.
• a:visited – Descreve um link que o usuário atual já visitou antes, significando que ele existe no histórico do navegador.
• a:hover – direciona o estilo que aparece quando um usuário passa o cursor do mouse sobre um link.
• a:active – Estilo brevemente visível durante o momento de um clique no link.
• a:focus – Um link focado, por exemplo, para o qual um usuário navegou usando a tecla tab. o hover e o focus geralmente são estilizados juntos.

O que é importante observar é que, ao alterar o estilo de vários estados de link de uma só vez, você deve fazê-lo na seguinte ordem.

1. a
2. a:link
3. a:visited
4. a:focus
5. a:hover
6. a:active

O estilo para os estados de links é construído um sobre o outro e em cascata. Portanto, a ordem é importante para garantir que eles funcionem conforme o esperado.

Atendendo às expectativas do usuário

O último aparte antes de entrarmos em como você pode fazer alterações no estilo do link via CSS, é falar sobre as expectativas do usuário. A razão pela qual você provavelmente reconheceu os links padrão facilmente como links é porque certos padrões estão enraizados em nós como usuários há muito tempo.

Como consequência, nós – e todos os outros – temos expectativas muito claras sobre a aparência dos links. Expectativas que, se não forem cumpridas, podem dificultar o reconhecimento dos links pelo que são. Por esse motivo, ao trabalhar no design do seu site, você deve ficar perto dessas expectativas.

Em termos práticos isso significa:

• Certifique-se de que os links estejam destacados de alguma forma. Cores ou sublinhados são bons, desde que você faça os links se destacarem na página. Evite coisas como itálico ou negrito .
• Forneça feedback fazendo com que os links mudem quando passam o mouse e, em menor grau, clicados ( a:active , lembra?). Você também não deve mexer com o cursor se transformando em um símbolo de mão para significar um elemento interativo.

A seguir, mostraremos como alterar todos os itens acima. No entanto, lembre-se de que você deve fazê-lo com moderação para evitar frustrar seus usuários.

Como alterar o estilo do texto do seu link via CSS

Vamos primeiro falar sobre como alterar a parte de texto do link, pois é isso que compõe a essência dele.

Modificando a cor do texto do link

As coisas que abordamos nesta seção são relativamente semelhantes ao nosso artigo sobre como declarar cores via CSS. Então, se você quiser realmente entrar nos detalhes, aconselho que você também dê uma olhada nesse post.

Você pode alterar a cor do texto do link de várias maneiras: palavras coloridas e diferentes sistemas de notação de cores como código HEX, rgb() / rgba() , hsl() / hsla() , etc.

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

Aqui está o que o acima parece na página:

Mais comumente, você usará algo como HEX ou rgb() . O uso de nomes de cores é extremamente raro fora dos casos de teste simples.

O sistema de cores que você usa depende de diferentes fatores, como compatibilidade do navegador ou se você precisa ou não de transparência. No entanto, como você pode ver, atribuir cores a links é bastante simples por meio da propriedade color e funciona da mesma maneira para todos os outros estados de link. Consequentemente, você também pode alterar facilmente a cor do texto para :hover ou :focus .

Ajustar a cor de fundo

Além de alterar a cor do texto, você também pode modificar a cor de fundo de seus links e seus diferentes estados. Isso é tão fácil quanto usar a propriedade background-color .

Aqui está a marcação para o exemplo acima:

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

Outras opções de estilo de texto

Como os links não são nada além de texto, todas as outras formas de estilizar o texto em CSS também se aplicam a eles. Isso significa que você pode atribuir outras propriedades a links e seus diferentes estados e fazer com que eles alterem o tamanho da fonte, as famílias de fontes ou outras coisas quando os usuários passarem o mouse sobre elas.

Isso pode fazer sentido para certos designs, no entanto, são formas menos comuns de estilizar links via CSS.

Aqui está a marcação para obter os efeitos acima:

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

Trabalhar com sublinhado

Como aprendemos no início, os links são sublinhados por padrão. Se você quiser se livrar disso, você pode usar text-decoration: none; (que é o uso mais comum da propriedade text-decoration ).

 a { text-decoration: none; }

Algumas pessoas também preferem adicionar um sublinhado apenas ao passar o mouse, mas não para o link normal. Isso também é fácil de fazer.

 a { text-decoration: none; } a:hover { text-decoration: underline; }

Além disso, você pode usar border: bottom; em vez de text-decoration: underline; para adicionar uma linha sob seus links. As pessoas costumavam empregar isso porque oferecia melhores opções de estilo. No entanto, atualmente temos novas propriedades para o método de underline padrão que permitem mais personalizações.

Por exemplo, text-underline-offset permite controlar a distância entre o texto e a linha abaixo ao usar text-decoration . text-decoration-thickness permite que você defina uma largura de linha personalizada. Então, ir pela rota da border não é mais tão necessário como costumava ser.

Além disso, existem muitas maneiras de trabalhar com a linha em links, incluindo animação. Você provavelmente poderia escrever outro artigo apenas sobre isso.

Alterando o estilo do cursor ao passar o mouse

Como já falamos, quando você passa o mouse sobre um link, o cursor do mouse muda de uma pequena seta para uma pequena mão que está apontando.

Até agora, esse é o sinal universal de que você está lidando com um elemento HTML clicável. No entanto, você pode não estar ciente de que também pode alterar o cursor para outras coisas, de uma cruz sobre setas de redimensionamento para um indicador de carregamento.

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

Se você estiver curioso, experimente o acima em um ambiente de desenvolvimento local para ver seu efeito. Há muito mais opções, que você pode encontrar aqui.

No entanto, como o ponteiro é tão universal, isso é definitivamente o que os usuários esperam e você geralmente deve ficar com ele. Se, por algum motivo, não estiver funcionando para seus links, você poderá corrigi-lo com o seguinte trecho de código:

 a { cursor: pointer; }

É até possível usar imagens personalizadas se você quiser usar seus próprios cursores em seu site. Por exemplo, uma loja online alemã de produtos musicais usa seu próprio cursor de ponteiro temático.

Se você examinar como eles fazem isso por meio das ferramentas de desenvolvedor do seu navegador, você encontrará o seguinte trecho de código:

 a { cursor: url(../images/hand.cur),pointer; }

Como você pode ver, você pode simplesmente usar um cursor personalizado fornecendo o endereço para um arquivo de imagem.

Fazer alterações em a:focus

O estilo de focus é uma importante ajuda de acessibilidade, portanto, certifique-se de que ele permaneça por perto. Por padrão, o destaque acontece através da propriedade outline , que faz aparecer uma caixa ao seu redor.

Por que outline e não border você pergunta?

Porque o outline não ocupa espaço na página. Em vez disso, ele fica no topo do plano de fundo do elemento. Dessa forma, focar um link não altera os saltos de layout da página ou similares.

Então, que outras opções de estilo você tem para um link focado?

Muitos deles. Leva tudo, de background-color a color , font-size , box-shadow , você escolhe.

Veja como conseguir o acima:

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

Usando a:focus , você pode fazer basicamente o que quiser. Um dos aplicativos mais interessantes, no entanto, pode ser que você também pode simplesmente personalizar o padrão do navegador usando a propriedade outline .

 a:focus { outline: 3px dotted green; }

Aqui está o que o acima parece na página:

Botões e caixas de link

Claro, os links não são apenas links de texto. Em alguns lugares, eles geralmente aparecem como caixas, como menus de navegação, como partes de formulários ou chamadas para ação.

Isso não é muito difícil de conseguir. Basicamente, você só precisa encontrar maneiras de adicionar espaço ao redor do texto do link e fornecer um plano de fundo ou borda/contorno para que ele apareça como um botão ou caixa. Além disso, eles ainda são o mesmo elemento de link que estávamos usando antes.

Existem várias maneiras de conseguir isso, desde simplesmente adicionando preenchimento a sistemas como flexbox ou grid. Abaixo está apenas um exemplo de como você pode fazer isso, existem muitas outras opções.

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

Nesse caso, o CSS contém tanto o estilo do link quanto o contêiner no qual ele reside. É claro que você pode usar os mesmos estados de link de antes para incluir comportamentos diferentes para diferentes cenários.

Incluir ícones em seus links

Uma coisa rápida que merece explicação é que você também tem a possibilidade de incluir ícones em seus links. É o que algumas pessoas fazem para deixar ainda mais claro que algo é um outlink que levará os usuários para longe da página atual.

Veja como fazer isso. Primeiro o HTML:

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

Em seguida, o CSS:

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

O a[href^="http"] segmenta apenas tags âncoras que têm um endereço começando com http no href="" . Para esses, a marcação adiciona uma imagem de fundo, que é o ícone, define-o como sem repetição, move-o totalmente para a direita e centraliza-o verticalmente. O restante da marcação define o tamanho do ícone e cria um pouco de espaço entre ele e o texto.

Considerações Finais: Estilo CSS para Links

Alterar o estilo dos links via CSS não é tão difícil assim que você domina o básico. A parte mais importante é entender que eles assumem diferentes estados que são alvos de diferentes operadores e pseudoclasses. Depois disso, é simplesmente uma questão de usar as propriedades comuns do CSS para alterar seu design para o que você quiser. Agora você tem todas as informações necessárias para começar.

Qual é a sua maneira favorita de estilizar links via CSS? Alguma outra dica para compartilhar? Por favor, faça isso nos comentários!