Efeito :hover com CSS, simples e muito funcional
Everaldo Matias
Posted on May 25, 2020
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?
💖 💪 🙅 🚩
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.