Cores dos links em HTML

Neste artigo, veremos mais de perto a diferença de cor entre esses estados e como você pode estilizar seus links HTML de acordo.

Estamos explorando HTML Links Colors . Os links HTML fornecem uma maneira de adicionar cor e interesse às páginas da Web, tornando-as visualmente mais atraentes.

Os links HTML , também conhecidos como hiperlinks, permitem que os usuários naveguem de uma página da Web para outra com um simples clique. Esses links são representados por um objeto HTML e podem ser estilizados para corresponder ao design do seu site.

Um aspecto a considerar ao estilizar links HTML é sua cor , que pode diferir com base em seu estado visitado, não visitado ou ativo.

Um recurso da Web pode ser vinculado a outro com um link, um objeto HTML. Ao clicar nele, você pode navegar para outra página na web.

O seguinte link aparece por padrão (em todos os navegadores):

  • Um link que não foi visitado é sublinhado e azul
  • O sublinhado roxo indica que um link foi visitado
  • Links sublinhados e vermelhos estão ativos

Usando CSS, você pode alterar as cores do estado do link:

Neste exemplo, os links não visitados aparecerão em marrom sem sublinhado. Um link preto sublinhado indica que foi visitado. Links azuis sublinhados são links ativos. Além disso, ao passar o mouse sobre um link ( a:hover ), ele ficará sublinhado e laranja:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<style>
a:link { color: brown; background-color: transparent; text-decoration: none; }
a:visited { color: black; background-color: transparent; text-decoration: none; }
a:hover { color: red; background-color: transparent; text-decoration: underline; }
a:active { color: blue; background-color: transparent; text-decoration: underline; }
</style>
</head>
<body> <a href="https://mrexamples.com/html/">
HTML Examples
</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Índice-

Borda em Ativo

As bordas HTML no ativo podem ser usadas para gerar uma variedade de efeitos visuais, desde sutis e discretos até ousados ​​e atraentes. Você pode experimentar diferentes estilos de borda, cores e larguras para criar uma aparência única e atraente.

É possível estilizar um link adicionando uma borda a ele usando propriedades CSS. Consulte o exemplo a seguir para obter mais informações

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<title>linking pages using absolute URL</title>
<style>
a:link {
text-decoration: none;
border: 2px dotted blue;
color:red;
}
</style>
</head>
<body>
<a target="_blank" href="https://www.google.com/">Google</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Borda ao passar o mouse

As bordas HTML ao passar o mouse também podem ser usadas para criar uma variedade de efeitos visuais, desde simples e discretos até ousados ​​e atraentes. Os designers podem experimentar diferentes estilos de borda, cores e larguras para criar uma aparência única e envolvente para seu site.

Um link pode ser estilizado com uma borda por meio de propriedades CSS. Veja exemplo abaixo

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>linking pages using absolute URL</title>
<style>
a:hover {
text-decoration: none;
border: 1px solid #000000;
}
</style>
</head>
<body>
<a target="_blank" href="https://www.google.com/">Google</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Os botões de link HTML podem ser usados ​​de várias maneiras, desde menus de navegação até botões de chamada para ação.

Um link também pode ser estilizado como um botão, usando CSS:

Este é um link

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: grey;
padding: 20px 35px;
text-align: center;
text-decoration: underline;
display: inline-block;
}a:hover, a:active {
background-color: orange;
}
</style>
</head>
<body>
<a href="https://mrexamples.com/">HTML Examples</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Exemplo de Explicação

O código HTML acima define o funcionamento de um hiperlink ( tag <a> ) que direciona para uma página da web localizada em “https://mrexamples.com/”. O link é exibido com um estilo específico definido no código CSS na seção head do arquivo HTML.

O código CSS define dois estilos para o hiperlink: um para quando o hiperlink não é visitado (a:link) e outro para quando o hiperlink é visitado (a:visited). A propriedade background-color define a cor de fundo do hiperlink e a propriedade color define a cor do texto. A propriedade padding adiciona espaço entre o texto e a borda do hiperlink. A propriedade text-align centraliza o texto no hiperlink e a propriedade text-decoration sublinha o texto.

Quando o usuário passa o mouse ou clica no hiperlink (a:hover e a:ativo), a cor de fundo do hiperlink muda para laranja.

Aqui está outro exemplo de links usando CSS:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<title>linking pages using absolute URL</title>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Click the link below to redirect to google account page</h2>
<a target="_blank" href="https://myaccount.google.com/">Account Page</a>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Para saber mais sobre CSS, acesse nosso Tutorial de CSS.
Marcação Visão geral
<a> Define um hiperlink.

Para obter uma lista completa de todas as tags HTML disponíveis, visite nossa página Referência de tags HTML .

As cores dos links podem ser usadas não apenas para melhorar a usabilidade e acessibilidade dos sites, mas também para criar um estilo visual distinto. Seguem alguns exemplos:

  • Usando uma cor que combine com o logotipo ou marca do site: Para criar uma identidade visual coesa, você deve usar cores de link que combinem com o logotipo ou marca do site.
  • Use cores de link em negrito ou brilhantes para chamar a atenção: esquemas de cores em negrito ou em negrito podem ser usados ​​para chamar a atenção para seções ou links específicos em uma página da web. Em um site de comércio eletrônico, você pode usar um link de cor vermelha brilhante para chamar a atenção para um botão “Compre agora”.
  • Use cores de link suaves ou sutis para uma aparência minimalista: você pode escolher cores de link suaves ou sutis no lugar de cores de link em negrito para obter uma aparência minimalista e discreta. A estética de design limpo e organizado pode ser alcançada usando este método.
  • Use cores de link exclusivas para diferentes seções de um site: a criação de uma hierarquia visual e a condução de usuários por meio de um site também podem ser realizadas com o design de diferentes cores de link para diferentes seções. Os links para conteúdo relacionado podem ter a cor de outro link, enquanto os links para sites externos podem ter a cor de um terceiro link.

Conclusão

As cores do link HTML melhoram a usabilidade, a acessibilidade e o apelo visual do site, melhorando a usabilidade, a acessibilidade e o apelo visual do site. Você pode criar uma experiência distinta e envolvente para os visitantes do site usando CSS para definir cores de link para diferentes estados de hiperlinks.

Você pode usar cores de link HTML de várias maneiras, desde combinar com a marca do site até chamar a atenção para links específicos. Também é possível usar diferentes cores de link em um site para criar uma hierarquia visual e direcionar os usuários para diferentes seções.

Além disso, cores de link de alto contraste podem tornar os sites mais acessíveis para usuários com deficiência visual. Um site que usa cores de link HTML de forma criativa não apenas terá uma ótima aparência, mas também aprimorará a experiência do usuário.

Para ser notificado sobre as últimas notícias e atualizações técnicas, assine nosso boletim informativo abaixo.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.