The Button Widget helps you easily design and customize buttons without the need for any other plugins or shortcodes.
Content
Button
| Text | Enter the button’s text |
| Link | Set the URL for the button’s link. Click the cog to set the link to either open in a new window or to add rel=nofollow to the link |
| 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) |
| Width | Control the thickness of the border around the button |
| Height | Control the height of the button |
| Icon | Select from the library or upload SVG icon to display on the button |
| Icon spacing | Adjust the amount of space between the icon and the button text |
| Button ID | Assign a unique button ID to use for situations such as Google Analytics events |
Style
Button(Normal/Hover)
| Typography | Change the default typography options for the button’s text |
| Text shadow | Add a shadow and blur to the button’s text |
| Color type | Select the color type of the button’s text |
| Background type | Select the button’s background color for both normal and hover states. You may use a classic or gradient color |
| Box shadow | Set options to apply a box-shadow on the button |
| Border color | Set the color for the border |
| Border radius | Set the border radius to control corner roundness |
| Hover animation | Set the different animation effects for the hover |
| Transition duration | Set the duration for the transition effect for the hover |
| Border type | Select the type of border to use around the button |
| Padding | Change the padding settings of the button |
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
Advanced
Click here to set the advanced options that are applied to this widget.