Diseño de botones para minimalRC

Publicado: 2020-11-15

Bien, 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.

Ver imagen…

Figura 1: Diseño predeterminado de outline.
Figura 1: Diseño predeterminado de outline.

¿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.

Ver imagen…

Figura 2: Nuevo diseño de botones.
Figura 2: Nuevo diseño de botones.

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.

¿Tienes algún comentario?

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *