The Button Widget helps you easily design and customize buttons without the need for any other plugins or shortcodes.

Content

  1. Type: Select from 5 styles of buttons to begin your design. Choose from DefaultInfoSuccessWarning, or Danger
  2. Text: Enter the button’s text
  3. 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
  4. Alignment: Align the button to the left, center, right, or justified in relation to its column.
  5. Size: Select the preset button sizes, from Extra Small to Extra Large (see padding default details at the bottom of this document)
  6. Icon: Select a FontAwesome icon to display on the button
  7. Icon Position: Set the icon to appear before or after the button text
  8. Icon Spacing: Adjust the amount of space between the icon and the button text
  9. Button ID: (Optional) Assign a unique button ID to use for situations such as Google Analytics events

Style

  1. Typography: Change the default typography options for the button’s text
  2. Text Shadow: Add a shadow and blur to the button’s text
  3. Text Color: Select the color of the button’s text
  4. Background Color: Select the button’s background color for both Normal and Hover states
  5. Hover Animation: Click on the Hover tab to set a Hover Animation
  6. Border Type: Select the type of border to use around the button
  7. Width: Control the thickness of the border around the button
  8. Color: Choose the border’s color
  9. Border Radius: Set the border radius to control corner roundness
  10. Box Shadow: Set options to apply a box shadow on the button
  11. Padding: Change the padding settings of the button

How to Make a Download PDF Button

  1. Add a Text Editor widget
  2. Upload your PDF through the Text Editor Widget
  3. Publish the page
  4. Go to the live page and copy the URL link pointing to the PDF
  5. Now, in another page, add a Button widget and set the link to the URL 

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

Got a question?

If this article didn’t help try our FAQ’s or use this form to ask a question.

On this page - Quick Links