Formas
Existen dos formas de botones que se pueden utilizar:
Construcción
Los botones se construyen partiendo de un rectángulo. El botón debe tener una altura de 37 px y puede crecer hacia lo largo hasta un límite de 200 px, siempre respetando el área de reserva para el texto, como se muestra a continuación.
Rectangulares con bordes redondeados
Las esquinas son ligeramente curvas; éstas se logran utilizando la herramienta redondear vértices (round corners) a 2 px.
Circulares
Las esquinas son completamemte circulares su diámetro debe ser igual a la altura del botón.
Casos especiales
En los casos donde se requiera un botón más pequeño se puede usar
circular o cuadrado.
Versiones
Independientemente de la forma, los botones se pueden usar en color sólido o en línea de contorno. En el último caso, su grosor puede variar del 3 al 4 % de X, siendo X la altura del botón.
Colores
Los colores que se deben utilizar en los botones son los de la paleta de color corporativa así como los colores que identifican a las prestaciones o unidades de negocio.
No se deben utilizar combinaciones de colores entre tipografía y fondo que no tengan contraste o que no favorezcan la legibilidad. A continuación, se muestran algunos ejemplos de aplicación:
También, se pueden usar en color blanco cuando se encuentren sobre fondo de color. Se podrán ubicar sobre distintos fondos de color, siempre y cuando haya suficiente contraste que favorezca la legibilidad del botón.
Transparencia
Los botones pueden tener una opacidad del 90-95% de su color. El porcentaje depende del color del botón, la legibilidad que tenga con el fondo donde se aplique (generalmente una imagen) y el color de la tipografía.
Tipos de botón
A continuación, presentamos los distintos tipos de botones que podemos usar:
1. Botón de acción primaria
Son botones sencillos que constan de una forma contenedora sólo con tipografía. El texto debe ir en mayúsculas sostenidas y puede usar cualquier forma o color de los ya establecidos.
2. Botón con ícono
Este tipo de botón está compuesto por una forma contenedora con un ícono y tipografía. Los íconos deben seguir los lineamientos establecidos para la iconografía de la marca. El texto va en altas y bajas y puede usar cualquier forma o color de los ya establecidos.
3. Botón de navegación y acción secundaria
Está compuesto por dos botones: El primero, el de acción secundaria, se usa en línea de contorno. El segundo, el botón de navegación, se usa en color sólido. En ambos, el texto va en altas y bajas y se puede usar cualquier color de los ya establecidos.
4. Botón de acción inmediata
Este tipo de botón está compuesto por un campo de ingreso de texto y una forma contenedora. Dentro del contenedor, se ubica el texto correspondiente en altas y bajas y puede o no llevar un icono. Puede usar cualquier forma y color de los ya establecidos.
Usos incorrectos
A continuación, presentamos algunos de los usos incorrectos para la creación de botones:
1. No se deben utilizar colores en la tipografía que no contrasten con el color del botón.
2. No usar colores de fondo que no logren contraste con el botón.
3. La esquina del botón nunca deberá ser cuadrada.
4. Las esquinas no pueden tener curvaturas distintas a las indicadas.
5. Los botones con línea de contorno deben tener el grosor indicado.
6. No se debe modificar la altura de los botones.
7. Para el caso especial del botón en formato cuadrado, no se deben usar iconos, sólo flechas.
'