Kmilo Noa ♦️ avatar

👨‍💻 CSS Tip #1: hover effect

noakmilo

Published: 25 May 2023 › Updated: 25 May 2023👨‍💻 CSS Tip #1: hover effect

👨‍💻 CSS Tip #1: hover effect


Hi, guys, today I wanted to bring you this little tip when animating hovers in CSS. With this code you will be able to change the brightness of any HTML object when you hover over it.

button:hover {
   filter: brigthness(70%);
}

Some developers prefer to change the color directly, but the truth is that with the filter: brightness () CSS property, a better result is obtained, since in theory the only thing we are doing is lowering the brightness of the object. This way we avoid unnecessary changes in the color palette of our project.

If you liked this content, please leave me a comment to make more videos like this.

Versión en Español

Hola, chicos, hoy les he querido traer este pequeño tip a la hora de animar hovers en CSS. Con este código serán capaces de cambiar el brillo de cualquier objeto HTML a la hora de pasar el ratón sobre él.

Algunos desarrolladores prefieren cambiar directamente el color, pero la verdad es que con la propiedad filter: brightness() de CSS, se obtiene un mejor resultado, ya que en teoría lo único que estamos haciendo es bajándole el brillo al objeto. Así evitamos cambios innecesarios en la paleta de colores de nuestro proyecto.

Si te gustó este contenido déjame un comentario para hacer más videos como este.


Translated and formatted with Hive Translator by noakmilo@noakmilo.

Music by FASSounds from Pixabay


▶️ 3Speak

Leave 👨‍💻 CSS Tip #1: hover effect to:

Written by

Cuban, son, husband, friend, poet, geek and Hive Builder. Founder of Hive Translator.

Read more #tips posts


Best Posts From Kmilo Noa ♦️

We have not curated any of noakmilo's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

More Posts From Kmilo Noa ♦️