Content Controls
Content
Modify the essential details of your button, including the display text and any links associated with it.
- Text – Set the button’s display text.
- Link – Define the URL the button directs to when clicked. Additional information may be found in the Link Controls documentation.
Design Controls
Button
Customize the appearance and design of your button, including its style, text attributes, and unique visual elements.
- Style – Choose the overall design style for the button.
- Text – Adjust text-related properties. (Note: This control is available only when the style is set to “text”)
- Typography – Fine-tune the font style, size, and more.
- Padding – Adjust the space around the button text.
- Padding – Define specific padding values.
- Fancy Underline – Add an eye-catching underline beneath the text.
- Underline Color – Set the color for the underline.
- Arrow – Incorporate an arrow design alongside the text.
- Arrow – Choose an arrow style.
- Custom Arrow – Use a unique arrow icon. (Note: Available only when arrow style is set to “custom”)
- Space Before – Add spacing before the arrow.
- Hover Transform – Alter the arrow’s appearance on mouse hover. (Note: Not available when arrow style is “arrow-3”)
- Arrow Size – Define the size of the arrow.
- Custom – Design a completely bespoke button. (Note: This control is available only when the style is set to “custom”)
- Size – Adjust the button’s overall size.
- Size – Choose from predefined size options.
- Padding – Fine-tune the button’s padding. (Note: Available only when size is set to “custom”)
- Override Width – Manually set the button’s width.
- Full Width At – Determine the screen size where the button spans the full width.
- Background – Choose the button’s background color.
- Outline – Toggle the button’s outline.
- Color – Set the outline’s color. (Note: Available only when outline is active)
- Width – Define the thickness of the outline. (Note: Available only when outline is active)
- No Fill On Hover – Have the button appear transparent when hovered over. (Note: Available only when outline is active)
- Typography – Adjust the font style and related properties.
- Corners – Select the button’s corner style.
- Corner Radius – Customize the curvature of the corners. (Note: Available only when corner style is set to “custom”)
- Icon – Incorporate an icon into the button’s design.
- Icon – Choose an icon.
- Position – Determine the icon’s placement relative to the text.
- Size – Adjust the icon’s dimensions.
- Color – Define the icon’s color.
- Space Before – Add space before the icon.
- Space After – Add space after the icon.
- Hover Transform – Change the icon’s look when hovered over.
- Effects – Apply special visual effects to the button.
- Transition Duration – Set the time it takes for hover effects to appear or disappear.
- Scale On Hover – Define how much the button enlarges when hovered over.
- Shadow – Add a shadow effect to give the button depth.
Lightbox
Style the background and control elements when the button triggers a lightbox display.
- Background – Define the lightbox’s background color.
- Controls – Set the color for the lightbox’s control elements.
Spacing
Adjust the space above and below your button, ensuring it fits perfectly within your layout.
- Margin Top – Add or reduce space above the button.
- Margin Bottom – Add or reduce space below the button.
