Skip to main content
You are here: Forms

Styling a Button

Add Button to Form

For this example, we are going to have a Launches a URL button that directs us to the Mirata homepage, but the styling principles apply to other types of buttons.

Similar to editing other fields on your form there are three main sections of the properties window that will be helpful to know for styling purposes.

Presentation Properties

We can use the presentation properties to change style properties like width of the button, the label, and whether we would like to select an icon to be present on our button.

For this demonstration, we can set our button width to 4, change the label to read "Visit Mirata Website" and add an icon.

After making these changes, the button looks like this:

Style Properties

The style properties are helpful for changing the way the button looks on our form.

In this demonstration, we may really want to make our button flashy, so we can change the Field Style properties. I can change the container, input (text), and background colors. We might also want the button to appear in the center of the label by modifying the justification setting.

Our button now looks like this:

To make our button even more apparent, we may want to add a thick red outer border to the button control. We can do this by editing properties in the border section.