Preenchendo a cor de fundo da esquerda para a direita usando CSS

Em CSS, você pode criar efeitos de foco cativantes utilizando gradientes lineares e animando o posicionamento do fundo. Essa abordagem permite que você preencha o plano de fundo de um elemento da esquerda para a direita com uma nova cor ao passar o mouse.

Gradiente linear e tamanho do plano de fundo

A chave é usar um fundo gradiente linear composto por duas cores e defina o tamanho do fundo como o dobro da largura do elemento. Isso permite que você crie uma transição perfeita entre as duas cores.

Posicionamento e animação do plano de fundo

Inicialmente, posicione o plano de fundo à direita para começar com a cor mais à esquerda. Ao passar o mouse, altere a posição do plano de fundo para a esquerda para revelar a cor mais à direita. Para tornar a transição gradual, adicione a transição: todos os 2s facilitam; property.

Exemplo de código

div {
    background: linear-gradient(to left, red 50%, blue 50%) right;
    background-size: 200% 100%;
    transition:all 2s ease;
}
div:hover {
    background-position: left;
}

Personalizando a transição

Para controlar os pontos inicial e final da transição, ajuste as porcentagens no gradiente linear. Por exemplo, aqui está uma configuração que faz a transição de 34% para 65% da largura do elemento:

background: linear-gradient(to left, red 34%, blue 65%) right;
background-size: 300% 100%;

Ao implementar essa técnica, você pode criar facilmente efeitos de foco elegantes e atraentes que aprimoram a experiência do usuário em seus aplicativos da web e aprimoram o apelo visual geral de seus designs.