DEV Community

Everaldo Matias
Everaldo Matias

Posted on

Efeito :hover com CSS, simples e muito funcional

Esse é um truque muito simples e que ajuda a não ter que pensar o :hover a cada link que temos no site.

Para isso vamos usar a propriedade filter do CSS, da seguinte forma:

a:hover { filter: brightness( 50% ); } 

Nesse exemplo acima, a cor aplicada aos links terão seu brilho (brightness) reduzido em 50% quando o mouse passar sobre eles.

Para melhorar ainda mais, você pode adicionar uma transição nos links, da seguinte forma:

a { transition: all 0.2s ease-in-out; } 

Simples assim e muito útil. O que vocês acham?

Top comments (0)