Lucas Maidana
Posted on March 24, 2022
¡Hola! Les traigo un tip muy útil para cuando tienen que escribir los estilos de botones o links, y deben tener en cuenta los distintos estados o variantes de los mismos.
Este es un ejemplo de dos tipos de botones y sus estados.
El proceso lógico es empezar por los estilos del botón en su estado inicial y después desarrollar los estados mediante las pseudoclases correspondientes.
Lo recomendable es que si estás replicando una interfaz de un wireframe o estás utilizando un UI kit, respetes todos los colores y estilos acordados. En cambio, si estás programando tu propia UI y sólamente querés que tus botones queden funcionales, te voy a mostrar cómo podés alivianarte mucho el trabajo. Obviamente también suponemos que no vas a usar una librería UI.
Lo que lleva mucho tiempo al momento de estilizar los botones es buscar los colores correctos para los distintos estados, y se complica más aún si no tenés conocimientos sobre colores en UI. Y todavía más complicado si queremos tener botones con degradado porque tenemos que armar mínimo tres degradados que queden bien.
Acá es cuando aparecen los filtros CSS 👐
La idea es escribir sólo los estilos del estado por defecto, y obtener la apariencia de los demás estados mediante la propiedad filter, olvidándonos de todas las variaciones de los colores.
En el siguiente ejemplo uso la función brightness()
. Entonces hago el botón más clarito para el hover y lo hago más oscuro para active y focus.
Pero también podés usar otras funciones como opacity()
, grayscale()
y saturate(
). Es cuestión de probar lo que mejor se ajuste al aspecto que querés conseguir.
Podemos ver que incluso podemos aplicar lo mismo para enlaces.
En resumen:
button:hover {
filter: brightness(1.15);
}
button:active, button:focus {
filter: brightness(0.95);
}
Podés encontrar más ejemplos en los links que dejo al final.
Muchas gracias por leerme. Ojalá te sirva este tip para tus próximos proyectos. 💪
Fuentes:
Posted on March 24, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.