Personalizar Botones en Página en blanco

Personalizar diseño de un botón

En una Página en blanco, el componente de "Botón" es totalmente personalizable en estilos y colores.

Para personalizar un botón haz clic en Editar desde tu componente o desde la sidebar.

Información general de botón

• En "Nombre del Botón" coloca el texto que el usuario final va a visualizar en el botón.

• Utiliza la propiedad "Ancho" para definir, en pixeles, el ancho del botón.

• Utiliza la propiedad "Alto" para definir, en pixeles, el alto del botón.

• Utiliza la propiedad "Top" para definir el número de píxeles que hay entre el borde superior de la sección, y el borde superior del botón.

• Utiliza la propiedad "Left" para definir el número de píxeles que hay entre el borde izquierdo de la sección, y el borde izquierdo del botón.

• En “zIndex”, escribe un número del 1 al 10 para determinar en qué “capa” de la página va a estar tu Botón.

• En "Color de fondo", selecciona un color, o ingresa un código hexadecimal de color para tu botón.

Ícono

Si quieres agregar un ícono a tu botón, activa la función "Tiene ícono".

• Desactiva la función "Mostrar label" si quieres que no aparezca el nombre del botón, y en su lugar sólo aparezca el ícono.

• Desactiva la función "Mostrar ícono" si no quieres mostrar el ícono.

• Haz clic en "Selecciona un archivo" y sube el ícono desde tu equipo.

Hover

• En "Hover" selecciona el color que va a tomar el botón, cuando el usuario final ponga su cursor sobre el botón. Puedes seleccionarlo, o ingresarlo con el código hexadecimal.

Tipografía

• Utiliza las opciones de texto para personalizar el texto del botón:

  • • Negritas

    • Cursiva

    • Alineación

    • Color

    • Fuente

    • Tamaño

Borde

• Puedes agregar bordes a los botones, sólo tienes que activar la función "Tiene borde".

  • En “Color del borde” selecciona un color para tu borde

  • En “Ancho” determina el grosor de tu borde

  • En “Tipo” selecciona el estilo de tu 

    • Solid: Para un borde continuo.

    • Dashed: Para un borde rayado.

    • Dotted: Para un borde punteado.

• En "Redondez" puedes suavizar las puntas de tu botón. 

• También puedes usar uno de los tres estilos predefinidos de redondez para tu botón, sólo selecciónalo en la propiedad "Roundness".

Business Logic

• Para agregar el Business Logic a tus botones de Página en blanco, haz clic en "Configurar Lógica de Negocio", y procede a configurar tu business Logic. Cuando termines, haz clic en "Listo".