The Button control helps you easily design and customize buttons without the need for any other plugins or shortcodes.
Add Button to the page
Firstly, find the Button control in the controls add panel,. Then, drag and drop it into a section or container on your page.
Set contents of Button
Select content tab from the control's settings panel, and select button section:
Text: Enter the button’s text, or set the dynamic text with expression editor.
Tooltip: Set the text as the tooltip of this button.
Alignment: Align the button to the left, center, right, or justified in relation to its column.
Size: Select the preset button sizes, from Extra Small to Extra Large (see padding default details at the bottom of this document)
Icon: Select a icon to display on the button
Position: Set the icon to appear before or after the button text
Space: Adjust the amount of space between the icon and the button text
Actions for button clicking
When the button is clicked, there are mutiple options you can decide to use, pleaser refer to: Button-Execute type
Appearance
Dynamic Display Rules: When you set a dynamic display rule, it behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control.
Set Styles of Button
Typography: Change the default typography options for the button’s text
Text Shadow: Add a shadow and blur to the button’s text
Text Color: Select the color of the button’s text
Background Color: Select the button’s background color for both Normal, Hover and Click states. You may use a solid or gradient color
Border Type: Select the type of border to use around the button
Width: Control the thickness of the border around the button
Color: Choose the border’s color
Radius: Set the border radius to control corner roundness
Shadow: Set options to apply a box shadow on the button
Spacing: Change the padding settings of the button
Advanced Settings
Set the Advanced options that are applicable to this control.
Button Preset Sizes: Padding Defaults
Top, Left, Bottom, Right
Extra Small: 10px, 20px, 10px, 20px
Small: 12px, 24px, 12px, 24px
Medium: 15px, 30px, 15px, 30px
Large: 20px, 40px, 20px, 40px
Extra Large: 25px, 50px, 25px, 50px
Appearance
Dynamic Display Rules: When you set a dynamic display rule, it behaves differently based on specific conditions and rules. Learn how to create dynamic display rules for a control.
Note:
Button support dynamic display rules - dynamic style.