css

Efeito :hover com CSS, simples e muito funcional

everaldomatias

Everaldo Matias

Posted on May 25, 2020

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?

💖 💪 🙅 🚩
everaldomatias
Everaldo Matias

Posted on May 25, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related