Elementos
La idea es que puedas dar respuesta con estos botones a todas tus posibles necesidades.
Ahora te vamos a explicar como utilizar las clases para que des a tu botón la apariencia deseada.
Para facilitar el uso de clases en tus botones hemos preparado un sistema en el que tienes que juntar varios terminos para construir el nombre de la clase:
Siempre has de empezar con la palabra boton, después, sin espacios entre medias añades uno de estos colores: verde, rojo, amarillo o azul.
Si no añades nada más utilizarñas la versión principal, pero si quieres un boton secundario además debes añadir -secundario
Por ejemplo: class="botonverde-secundario"
Si quieres una versión más grande del botón, además debes añadir otra clase seguida de la anterior, grande. De esta manera se nos quedaría por ejemplo class="botonverde-secundario grande"
Si tienes un boton inactivo es tan facil como sustituir su apariencia por botoninactivo
Por cuestiones de accesibilidad es mejor no utilizar enlaces con apariencia de botón, pero por si acaso necesitas hacerlo hemos creado la clase .falsoboton que deberas añadir a tu enlace junto con la clase de la apariencia de boton que hayas seleccionado.
Te ponemos algunos ejemplos en código para que te resulte más sencillo. Recuerda que puedes combinar los botones con iconos.
<button class="botonverde">Verde</button> <button class="botoninactivo">Inactivo</button> <button class="botonazul">Azul</button> <button class="botonazul-secundario">Azul secundario</button> <button class="botonrojo grande">Rojo grande</button> <button class="botonazul-secundario grande"><div>azul secundario grande</div> <span class="material-symbols-outlined">settings</span></button> <button class="botonrojo grande"><div>rojo grande</div> <span class="material-symbols-outlined">settings</span></button> <button class="botonrojo-secundario grande"><div>rojo secundario grande</div> <span class="material-symbols-outlined">settings</span></button> <button class="botonverde grande"><div>verde grande</div> <span class="material-symbols-outlined">home</span></button> <button class="botonamarillo-secundario grande"><div>amarilllo secundario grande</div> <span class="material-symbols-outlined">settings</span></button>