Diseño de botones para minimalRC
Publicado: 2020-11-15Bien, el consejo 7 de 101 UX Principles dice que es necesario mostrar los botones como botones…
Entonces, ¿qué hago con mis hermosos outline? u.u
Vale, si es así, no me queda más que hacer algo estilo 3D, para lo cual elijo copiar el estilo dado por el tema Spacelab (aunque los temas Simplex, Slate, y Lumen eran buenas opciones).
En fin, que tuve que dejar mis discretos botones de contorno, como los que se muestran en la figura 1, en favor de la usabilidad.

¿Eso qué quiere decir?
Que cambié a botones como los que se muestran debajo, en la figura 2, con una clase de efecto tridimensional noventero.

Como dije, eso es en base al tema Spacelab, aunque solo cambié los botones primarios, que son los que planeo utilizar únicamente en mi sitio:
// Más código... @import "node_modules/bulma/bulma"; // Más código... .button.is-primary:not(.is-outlined):not(.is-inverted) { background-image:linear-gradient(180deg,$pinkie-pie-cuerpo-relleno 0%,$pinkie-pie-cola-relleno 90%,$pinkie-pie-cola-contorno 100%); -webkit-filter:none; filter:none; border:1px solid $pinkie-pie-cola-relleno; } .button.is-primary:not(.is-outlined):not(.is-inverted).is-hovered,.button.is-primary:not(.is-outlined):not(.is-inverted):hover { background-image:linear-gradient(180deg,$pinkie-pie-cuerpo-contorno 0%,$pinkie-pie-cola-relleno 90%,$pinkie-pie-cola-contorno 100%); border:1px solid $pinkie-pie-cola-contorno; }
Tras agregar ese código, solamente recompilamos con:
npm run build
Y listo.
Y sí, debo admitir que los botones noventeros se ven más como botones y me invitan más a dar clic. Punto para la usabilidad.