Simplificá los estilos de tus botones y todas sus variantes con filtros CSS

¡안녕! Les traigo un tip muy útil para cuando tienen que escribir los estilos de botones o link, 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 특파원.
추천할 만한 것은 UI 키트에서 와이어프레임의 인터페이스를 복제하거나 UI 키트를 활용하는 것입니다. 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. 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 deftoto, 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.



다시 시작:

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

Podés encontrar más ejemplos en los link que dejo al final.
Muchas gracias por leerme. Ojalá te sirva este tip para tus próximos proyectos. 💪

푸엔테스:

Using the brightness() CSS Filter to generically highlight Content - Rick Strahl's Web Log

Button styles using filter and brightness