Escurecer a cor de fundo do elemento com CSS

Aprimorar a interface do usuário envolve destacar elementos interativos, como botões, alterando sua aparência. Uma abordagem comum é escurecer a cor de fundo ao passar o mouse.

Inicialmente, pode-se tentar ajustar a opacidade, mas isso afeta tanto a cor quanto a transparência. Existe uma solução mais direcionada.

Método: sobrepor uma camada escura

Crie uma sobreposição escura usando imagem de fundo. Este método preserva a cor do texto original enquanto escurece o fundo.

Implemente a camada de sobreposição em CSS:

.Button {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

.Button:hover {
  background-color: /* Original background color */;
}

Esta técnica escurece automaticamente qualquer cor de fundo, mesmo múltiplas cores, como visto no exemplo:

 some text 
Ao aproveitar esse método de sobreposição, os desenvolvedores podem facilmente escurecer as cores de fundo dos elementos ao passar o mouse, melhorando a interatividade do usuário sem o incômodo de calcular manualmente os tons mais escuros.