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.
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.
