Ejemplo para cambiar el estilo del Botón

Introducción

Usted puede personalizar el estilo de sus botones en el Portal de Trabajo creando su definición de estilo CSS personalizada.

Los nuevos estilos CSS deben ser definidos en el archivo overrides que se encuentra en

C:\Bizagi\Projects\[ProyectoBizagi]\WebApplication\jquery\overrides\css\desktop\bizagi.custom.styles.css.

Este ejemplo ilustra cómo crear cuatro estilos diferentes. Si desea replicarlo, se requiere una conexión a Internet.

Para configurar este comportamiento:

1. Edite el archivo bizagi.custom.style.css que se encuentra en C:\Bizagi\Projects\[ProyectoBizagi]\WebApplication\jquery\overrides\css\desktop. Agregue el siguiente código CSS:

.btn_msteel{
background-image: none !important;
background: #415A68 url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
padding: 3px 20px 3px 40px !important;
border: 2px solid #FFF !important;
font-size: 21px !important;
font-weight: 500 !important;
font-family: Courier New,sans-serif !important;
box-shadow: none !important;
text-shadow: none !important;
}
.btn_msteel:hover{
background-image: none !important;
background: #8094A2 url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
box-shadow: none !important;
text-transform: uppercase !important;
text-shadow: none !important;
font-size: 21px !important;
font-weight: 500 !important;
font-family: Courier New,sans-serif !important;
}
 
.btn_mteal{
background-image: none !important;
background: #008D7F url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
padding: 3px 20px 3px 40px !important;
border: 2px solid #FFF !important;
font-size: 22px !important;
font-weight: 500 !important;
font-family: Kunstler Script,sans-serif !important;
box-shadow: none !important;
text-shadow: none !important;
}
.btn_mteal:hover{
background-image: none !important;
background: #00ACA2 url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
box-shadow: none !important;
text-shadow: none !important;
font-weight: 500 !important;
font-family: Kunstler Script,sans-serif !important;
}
 
.btn_molive{
background-image: none !important;
background: #B2BB1C url("http://www.bizagi.com/assets/images/common/btn_arrow.png") repeat-x 1px 50% !important;
color: #000 !important;
padding: 3px 20px 3px 40px !important;
border: 2px solid #FFF !important;
font-size: 10px !important;
font-weight: 500 !important;
box-shadow: none !important;
text-shadow: -1px 0 #C0C0C0, 0 1px #C0C0C0, 1px 0 #C0C0C0, 0 -1px #C0C0C0 !important;
text-align: left !important;
}
.btn_molive:hover{
background-image: none !important;
background: #D6E03D url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
box-shadow: none !important;
text-shadow: none !important;
font-size: 10px !important;
font-weight: 500 !important;
}
 
.btn_morange{
background-image: none !important;
background: #F28D1E url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
padding: 3px 20px 3px 40px !important;
border: 2px solid #FFF !important;
font-size: 22px !important;
font-weight: 500 !important;
font-family: Footlight MT Light,sans-serif !important;
box-shadow: none !important;
text-shadow: none !important;
}
.btn_morange:hover{
background-image: none !important;
background: #FDB825 url("http://www.bizagi.com/assets/images/common/btn_arrow.png") no-repeat 15px 50% !important;
color: #FFF !important;
box-shadow: none !important;
text-transform: uppercase !important;
text-shadow: none !important;
}

2. En Bizagi Studio, arrastre y suelte cuatro botones en la forma. Escriba la etiqueta de cada Botón.

3. En la pestaña Formato, establezca las siguientes clases en la propiedad Estilos css:

oMy Button 1 > btn_msteel

oMy Button 2 > btn_mteal

oMy Button 3 > btn_molive

oMy Button 4 > btn_morange

4. Vaya al Portal de Trabajo y pruebe sus resultados.