Add style to button

You can add custom styles to every button. Styling options for a button include customizing the label, adding color to the button and the text inside it, and specifying margin dimensions around the button.

To add style to a button in your page,

1. Edit your app.
2. Select the required page from the accordion menu on the top-left corner, or from the application preview in the middle. You'll be taken to its Design page.
3. Click on the device icon to navigate to the Design view of the device of your choice.

   

4. Hover in the middle and click Open Page Builder.
5. Click to select a panel that holds the button you want to customize.
6. Click the Configure option in the toolbar in the header area of the page builder. The Panel configuration pane slides in.
7. Select Style from the configuration options on the right.
8. Choose from the style options:
   • Button type: Select the button shape as rectangular or rounded.
   • Change font for button label: Click the Font family dropdown to select a font style.
   • Set text style for button label: Click the B, I or U icon to Bold, Italicise and Underline respectively. You can also change the button text to uppercase by clicking the change to uppercase icon.
   • Change font and button color: 
     • Click the font color picker icon to select a font color.
     • Click the color palette icon to select a button color.
   • Set font size: Specify the required font size or choose one from the dropdown.
   • Set margin for button: Specify a margin in pixels for all four sides of the button.
9. You can preview the changes and close the configuration sheet. The changes will be auto saved.