CSS - Links

Links Não Visitados

Links não visitados são o estado padrão de um link que ainda não foi clicado pelo usuário. Por padrão, os navegadores geralmente estilizam links não visitados com um sublinhado e uma cor azul. No entanto, você pode alterar esses estilos padrão usando CSS.

Para estilizar links não visitados, você pode usar o seletor a em seu código CSS.

a {
  color: #ff0000;
  text-decoration: none;
}

Os links não visitados terão uma cor vermelha (#ff0000) e o sublinhado será removido (text-decoration: none).

Você pode aplicar vários estilos a links não visitados, como alterar o peso da fonte, tamanho da fonte, cor de fundo ou adicionar bordas.

a {
  color: #333;
  font-weight: bold;
  border-bottom: 2px solid #333;
  transition: border-bottom-color 0.3s;
}

Este estilo dará aos links não visitados uma cor cinza escuro, peso de fonte em negrito e uma borda inferior sólida que faz transição ao passar o mouse.

Links Visitados

Links visitados são aqueles que já foram clicados e visitados pelo usuário. Os navegadores geralmente estilizam links visitados com uma cor roxa para diferenciá-los dos não visitados.

Para estilizar links visitados, você pode usar a pseudo-classe :visited em seu código CSS.

a:visited {
  color: #800080;
}

Links visitados terão uma cor roxa (#800080).

Por razões de privacidade, os estilos para links visitados são limitados. Você só pode alterar suas propriedades de cor como cor de fundo ou cor da borda.

a:visited {
  color: #999;
  border-bottom-color: #999;
}

Isso dá aos links visitados uma cor cinza claro e uma borda inferior correspondente.

Estado de Hover

O estado de hover é ativado quando os usuários passam o mouse sobre um link. Isso permite criar efeitos interativos e fornecer feedback visual.

Para estilizar links com o mouse em cima, use a pseudo-classe :hover em seu código CSS.

a:hover {
  color: #ff0000;
  text-decoration: underline;
}

Quando os usuários passam o mouse sobre qualquer link, sua cor muda para vermelho (#FF0000) e fica sublinhado.

Você também pode aplicar diferentes estilos aos links com o mouse em cima, como mudar fundos, bordas, transformações, etc.

a:hover {
  background-color: #f5f5f5;
  border-bottom-color: #FF0000;
  transform: translateY(-2px);
}

Isso resultaria em dar um fundo cinza claro junto com uma borda inferior vermelha e um leve movimento para cima.

Estado Ativo

Estados ativos são acionados sempre que um link é clicado, fornecendo feedback visual indicando o status atual da interação. Para estilizar links ativos, utilize a pseudo-classe :active dentro do código CSS.

a:active {
  color: black;
  background-color: #F5F5F5;
}

Ao clicar no link, sua cor se torna preta enquanto o fundo muda para um tom cinza claro (#F5F5F5).

Várias outras estilizações podem ser aplicadas a links ativos, incluindo alteração de fontes, pesos, bordas, transformações, etc.

a:active {
  font-weight: bold;
  transform: scale(95%);
}

Tal estilização torna as fontes mais negrito além de encolher ligeiramente através da redução de escala para noventa e cinco por cento durante eventos de clique. Lembre-se, estados ativos permanecem temporários, durando apenas enquanto os cliques persistem, após os quais eles voltam ao estado de hover ou não visitado, conforme apropriado.

Ao combinar estilos para diferentes estados de link (não visitado, visitado, hover, ativo), você cria experiências interativas visualmente atraentes, melhorando a usabilidade geral das páginas web.

Cor

A propriedade color define a cor do texto do link. Você pode usar nomes de cores, valores hexadecimais, RGB ou HSL para especificar a cor desejada.

a {
  color: #ff0000; /* Cor vermelha */
}

Decoração de Texto

A propriedade text-decoration é usada para adicionar ou remover sublinhados, sobrelinhados ou tachados dos links. Por padrão, os links são sublinhados.

a {
  text-decoration: none;
}

Cor de Fundo

A propriedade background-color define a cor de fundo do link. Isso pode ser útil para criar links que parecem botões ou destacar links importantes.

a {
  background-color: #f5f5f5;
  padding: 5px 10px;
}

Borda

A propriedade border permite adicionar bordas ao redor dos links. Você pode definir a largura, o estilo e a cor da borda usando as propriedades border-width, border-style e border-color.

a {
  border: 2px solid #000;
  padding: 5px 10px;
}

Preenchimento e Margem

A propriedade padding adiciona espaço dentro do link, enquanto a propriedade margin adiciona espaço fora do link. Essas propriedades controlam o tamanho e o espaçamento dos links.

a {
  padding: 10px;
  margin: 5px;
  display: inline-block;
}

Estilos de Fonte

Você pode modificar as fontes dos links usando propriedades como font-family, font-size, font-weight e font-style.

a {
  font-family: Arial, sans-serif; 
  font-size: 16px; 
  font-weight: bold; 
  font-style: italic;
}

Transições e Animações

As transições e animações CSS criam efeitos suaves ao passar o mouse ou clicar nos links.

a {
  transition: color 0.3s ease;
}
a:hover {
  color: #ff0000;
}

Estilos básicos de botão em link

a.button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 4px;
}

O link com a classe "button" terá uma cor de fundo azul (#007bff), cor de texto branca (#fff), preenchimento de 10 pixels na parte superior e inferior e 20 pixels na esquerda e direita, sem sublinhado (text-decoration: none) e cantos arredondados com um raio de borda de 4 pixels.

Você pode modificar ainda mais os estilos do botão para se adequar ao seu design. Por exemplo, você pode adicionar uma borda, mudar a cor de fundo ao passar o mouse, ou aplicar uma sombra.

Aprimorando os estilos de botão em link

a.button {
  display: inline-block;
  background-color: #007bff;
  color: #fff;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid #007bff;
  transition: background-color 0.3s ease;
}

a.button:hover {
  background-color: #0056b3;
}

Nesta versão aprimorada, o botão em link tem uma borda sólida com a mesma cor do fundo. A propriedade transition é usada para animar a mudança de cor de fundo ao passar o mouse. Quando você passa o mouse sobre ele, a cor muda para um tom mais escuro (#0056b3).

Botões em link são comumente usados para ações importantes ou links proeminentes dentro de uma página web. Eles ajudam a direcionar a atenção dos usuários e incentivam o clique. Alguns exemplos incluem:

1. Botões de ação primária são usados para ações principais como "Cadastre-se" ou "Compre Agora". Geralmente têm cores proeminentes.
2. Botões de ação secundária são usados para ações menos importantes.
3. Botões de contorno têm fundos transparentes com bordas coloridas.
4. Botões de gradiente usam transições graduais entre cores como fundos.

Ao estilizar botões em link, mantenha-os consistentes em todo o seu site usando cores, tamanhos e estilos que combinem com o design geral e a identidade visual do seu site.

Adicionando ícones usando imagens de fundo

a.icon-link {
  padding-left: 25px;
  background-image: url('path/to/icon.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px 20px;
}

O link com a classe "icon-link" terá um ícone exibido à esquerda do texto do link. A propriedade padding-left cria espaço para o ícone, e a propriedade background-image especifica onde encontrar o arquivo de imagem do ícone.

A propriedade background-repeat é definida como no-repeat para evitar repetições, e a propriedade background-position o posiciona no centro à esquerda. A propriedade background-size define seu tamanho para 20 pixels por 20 pixels.

Usando sprites CSS para ícones de link

Se você tem vários ícones ou gráficos para diferentes links, você pode usar sprites CSS para combiná-los em um único arquivo de imagem. Isso reduz as requisições HTTP e melhora o desempenho.

a.sprite-link {
  padding-left: 25px;
  background-image: url('path/to/sprite.png');
  background-repeat: no-repeat;
}

a.link-1 {
    background-position:0 -0px; 
}

a.link-2 {
    background-position:-0 -50px; 
}

Uma imagem sprite contém vários ícones posicionados verticalmente. Cada link tem uma classe específica (link-1, link-2) que define sua posição dentro da imagem sprite.

Posicionando e dimensionando ícones de link

Você pode controlar onde um ícone aparece em relação ao seu texto usando propriedades CSS como posicionamento (horizontal/vertical)

a.icon-link {
   padding-left: 25px;
   background-image: url('path/to/icon.png');
   background-repeat: no-repeat;
   background-position: 5px center;
}

Aqui vemos como nosso ícone é colocado exatamente a cinco pixels de distância horizontalmente, enquanto ainda está centralizado verticalmente dentro do próprio elemento do link!

Para alterar o tamanho desses recursos visuais na tela, basta ajustar suas dimensões através do atributo "Background Size":

a.icon-link {
   padding-left: 35px;
   background-image: url('path/to/icon.png');
   background-repeat: no-repeat;
   background-position: left center;
   background-size: 30px 30px; 
}

Adicionar texto alternativo relevante e consistente através de atributos ARIA label garante que todos se beneficiem igualmente, independentemente de quaisquer deficiências que possam enfrentar ao navegar por páginas da web contendo links visualmente aprimorados!