The Button widget allows you to place interactive and attractive buttons on your site and provides various customization options, allowing you to effortlessly manage the button’s appearance, behavior, and link destinations.
Content tab
- Type: Select from five button styles: Default, Info, Success, Warning, or Danger.
- Text: Input the text you want displayed on the button.
- Link: Set the URL for the button’s link. Click the Settings icon ⚙️ to choose if a link opens in a separate window, also enable ‘Add nofollow’ to prevent search engines from associating your site with the linked site.
- Icon: Select a FontAwesome icon to display on the button.
- Icon Position: Decide whether the icon should appear before or after the button text.
- Icon Spacing: Adjust the space between the icon and the button text using the slider. Note that this option is only visible if an icon is chosen.
- Button ID: Assign a unique button ID, which is useful for tracking events in Google Analytics and other similar purposes.
Style tab
- Position: Position the button to the left, center, right, or justify it within its column.
- Typography: Select the font style and size for the button's text.
- Text Shadow: Apply a shadow and blur effect to the button's text.
-
Normal Set the default appearance of the button
Text Color: Choose the color for the button's text.
Background Color: Apply a background color to the button. -
Hover: Set how the button looks when hovered over.
Text Color: Choose the text color for when the mouse is over the button.
Background Color: Apply a different background color for when the button is hovered over.
Hover Animation: Display an animation that occurs when the mouse is over the button.
Transition Duration: Configure the transition duration, determining how long it takes for the button to change appearance when hovered over. - Border Type: Select the type of border to apply around the button.
- Border Width: Determine the thickness of the button's border.
- Border Color: Choose the color for the button.
- Border Radius: Adjust the border radius to control the roundness of the corners.
- Box Shadow: Apply a shadow effect to the button.
- Padding: Set the amount of space between the button's text and its edges.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.