Simplificá los estilos de tus botones y todos sus estados con filtros CSS

---

 

22/03/2024

 

¡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 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 quieres que tus botones queden funcionales, te voy a mostrar cómo puedes aliviar 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 tienes 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.

Aquí 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 puedes usar otras funciones como opacity(), grayscale() y saturate(). Es cuestión de probar lo que mejor se ajuste al aspecto que quieres conseguir.

Podemos ver que incluso podemos aplicar lo mismo para enlaces.

CodePen Home CSS filters for styling buttons

 

En resumen:

button:hover {
    filter: brightness(1.15);
}
button:active, button:focus
 {
    filter: brightness(0.95);
}

Puedes 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. 💪

Ejemplo:

 

Referencias

• BLOGDESIGN - Simplificá los estilos de tus botones y todos sus estados con filtros CSS
• Using the brightness() CSS Filter to generically highlight Content - Rick Strahl's Web Log
• Button styles using filter and brightness