4 maneiras de animar a cor de um link de texto ao passar o mouse

Vamos criar um efeito CSS puro que altera a cor de um link de texto ao passar o mouse … mas deslize essa nova cor em vez de simplesmente trocar as cores.

Existem quatro técnicas diferentes que podemos usar para fazer isso. Vamos dar uma olhada nelas, tendo em mente coisas importantes, como acessibilidade, desempenho e suporte ao navegador.

Vamos começar!

#Técnica 1: Usando o clipe de fundo: texto

No momento da redação deste documento, a background-clip: textpropriedade é um recurso experimental e não é suportado no Internet Explorer 11 e abaixo.

Essa técnica envolve a criação de texto nocaute com um gradiente de parada forçada . A marcação consiste em um único elemento HTML link ( <a>) para criar um hiperlink:

<a href="#">Link Hover</a>

Podemos começar a adicionar estilos ao hiperlink. O uso overflow: hiddenrecortará qualquer conteúdo fora do hiperlink durante a transição do foco:

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  font-weight: 800;
  color: royalblue;
  overflow: hidden;
}

Precisamos usar um gradiente linear com uma parada forçada de 50% para a cor inicial que queremos que o link seja, assim como a cor para a qual ele mudará:

a {
  /* Same as before */
  background: linear-gradient(to right, midnightblue, midnightblue 50%, royalblue 50%);
}

Vamos usar background-clippara recortar o gradiente e o textvalor para exibir o texto. Também usaremos as propriedades background-sizee background-positionpara que a cor inicial apareça:

a {
  /* Same as before */
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
}

Por fim, vamos adicionar a transitionpropriedade :hoverCSS e a pseudo-classe CSS ao hiperlink. Para que o link seja preenchido da esquerda para a direita, passe o mouse sobre a background-positionpropriedade:

a {
  /* Same as before */
  transition: background-position 275ms ease;
}
a:hover {
  background-position: 0 100%;
}

Embora essa técnica atinja o efeito de foco, o Safari e o Chrome cortam decorações e sombras de texto , o que significa que elas não serão exibidas. A aplicação de estilos de texto, como um sublinhado, com a propriedade CSS de decoração de texto não funcionará. Talvez considere usar outras abordagens ao criar sublinhados .

#Técnica 2: Usando largura / altura

Isso funciona usando um atributo de dados que contém o mesmo texto que o da <a>tag e configurando o width(preenchendo o texto da esquerda para a direita ou da direita para a esquerda) ou height(preenchendo o texto de cima para baixo ou para baixo) para cima), de 0% a 100% em foco.

Aqui está a marcação:

<a href="#" data-content="Link Hover">Link Hover</a>

O CSS é semelhante à técnica anterior, menos as propriedades CSS de segundo plano. A text-decorationpropriedade funcionará aqui:

a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: royalblue;
  font-weight: 800;
  text-decoration: underline;
  overflow: hidden;
}

É quando precisamos usar o conteúdo do data-contentatributo Ele será posicionado acima do conteúdo da <a>tag. Utilizamos o pequeno truque de copiar o texto no atributo data e exibi-lo através da attr()função na propriedade content do ::beforepseudo-elemento do elemento.

a::before {
  position: absolute;
  content: attr(data-content); /* Prints the value of the attribute */
  top: 0;
  left: 0;
  color: midnightblue;
  text-decoration: underline;
  overflow: hidden;
  transition: width 275ms ease;
}

Para impedir que o texto seja quebrado até a próxima linha, white-space: nowrapserá aplicado. Para alterar a cor de preenchimento do link, defina o valor da propriedade CSS da cor usando o ::beforepseudoelemento e widthiniciando em 0:

a::before {
  /* Same as before */
  width: 0;
  white-space: nowrap;
}

Aumente a largura para 100% no  ::before pseudo elemento para concluir o efeito de texto ao passar o mouse:

a:hover::before {
  width: 100%;
}

Embora essa técnica faça o truque, o uso das propriedades widthou heightnão produzirá uma transição CSS de alto desempenho . É melhor usar as propriedades transformou opacitypara obter uma transição suave de 60 fps.

O uso da text-decorationpropriedade CSS pode permitir que diferentes estilos de sublinhado apareçam na transição CSS. Eu criei uma demonstração mostrando isso usando a próxima técnica: a clip-pathpropriedade CSS.

#Técnica 3: Usando o caminho do clipe

Para esta técnica, usaremos a clip-pathpropriedade CSS com uma forma de polígono. O polígono terá quatro vértices, com dois deles expandindo para a direita ao passar o mouse:

A marcação é igual à técnica anterior. Usaremos um ::beforepseudo-elemento novamente, mas o CSS é diferente:

a::before {
  position: absolute;
  content: attr(data-content);
  color: midnightblue;
  text-decoration: underline;
  clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
  transition: clip-path 275ms ease;
}

Diferente das técnicas anteriores, text-decoration: underlinedeve ser declarado como ::before pseudo-elementpara a cor preencher o sublinhado ao passar o mouse.

Agora vamos examinar o CSS para a clip-pathtécnica:

clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);

Os vértices do polígono da clip-pathpropriedade são definidos em porcentagens para definir coordenadas pela ordem escrita:

• 0 0 = canto superior esquerdo
• 0 0 = canto superior direito
• 100% 0 = canto inferior direito
• 0 100% = canto inferior esquerdo

A direção do efeito de preenchimento pode ser alterada modificando as coordenadas. Agora que temos uma idéia para as coordenadas, podemos fazer o polígono expandir para a direita ao passar o mouse:

a:hover::before {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

Essa técnica funciona muito bem, mas observe que o suporte à clip-pathpropriedade varia entre os navegadores . Criar uma transição CSS com clip-pathé uma alternativa melhor do que usar a técnica width/ height; no entanto, isso afeta a pintura do navegador .

#Técnica 4: Usando transformação

A marcação para esta técnica usa um método de mascaramento com um <span>elemento. Como usaremos conteúdo duplicado em um elemento separado, usaremos aria-hidden="true"para melhorar a acessibilidade – que o ocultará dos leitores de tela para que o conteúdo não seja lido duas vezes:

<a href="#"><span data-content="Link Hover" aria-hidden="true"></span>Link Hover</a>

O CSS para o <span>elemento contém uma transição que será iniciada a partir da esquerda:

span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 275ms ease;
}

Em seguida, precisamos  <span>deslizar para a direita da seguinte maneira:

Para fazer isso, usaremos a translateX()função CSS e a definiremos como 0:

a:hover span {
  transform: translateX(0);
}

Em seguida, usaremos o ::beforepseudoelemento para o <span>, novamente usando o data-contentatributo que fizemos anteriormente. Definiremos a posição traduzindo-a 100% ao longo do eixo x.

span::before { 
  display: inline-block;
  content: attr(data-content);
  color: midnightblue;
  transform: translateX(100%);
  transition: transform 275ms ease;
  text-decoration: underline;
}

Assim como o <span>elemento, a posição do ::beforepseudo-elemento também será configurada para   translateX(0):

a:hover span::before {
  transform: translateX(0);
}

Embora essa técnica seja a mais compatível com vários navegadores, ela exige mais marcação e CSS para chegar lá. Dito isto, o uso da propriedade CSS de transformação é excelente para o desempenho , pois não aciona repainas e, portanto, produz transições CSS suaves a 60fps.

#Aqui temos!

Acabamos de analisar quatro técnicas diferentes para obter o mesmo efeito. Embora cada um tenha seus prós e contras, você pode ver que é totalmente possível inserir uma mudança de cor no texto. É um pequeno efeito interessante que faz com que os links pareçam um pouco mais interativos.