Used to create buttons on a page.


How do I add this widget to a page?

  1. Click Edit Page
  2. Click either + Content or the Settings icon (down-facing arrow) which will be located to the right of Edit where you will need to select either Insert before or Insert after
  3. Choose the Button widget
  4. Enter the text you would like displayed on the button.
    Tip - It is best to keep the text inside a button as short as possible. Anything that goes over ten or fifteen words is probably too long. Simple statements are best.
  5. Enter the link that you would like to link to.

    Note - It is also possible to have a button send an email or dial a phone number when clicked on. Both will try to open the appropriate program, on a visitor's computer if one is available, to handle the request. If one is not available nothing will happen.
    • If you like to use the button as a Contact Us enter mailto: followed by the email address into this field. So to send to stevej@domain.com you would enter mailto:stevej@domain.com into the link field.

    • To have the button dial a phone number enter tel: followed by the phone number into this field. So to dial 1-513-222-3333 you would enter tel:15132223333 into the link field.

  6. Select the target. We recommend if the link is going to a document or an external website that the target be changed to New Window
  7. Additional fields can be found in the Settings tab, these will allow you to customize what information the widget displays. The fields and their descriptions are listed below;
    • Style - Choose the style of the button. The options available are; Default and Link Only
    • Size - Select the size of the button from the default size up to Large.
    • Color - Select the color of the button from the following options; Primary, Secondary, Tertiary, Accent, Info, Gray, Light Gray, Dark Gray, and Dark
    • Icon - Pick from a selection of icons if you want one to be displayed.
    • Alignment - Allows you to pick the alignment of the button from left, center and right. By default, the alignment is left
    • Full Width - Should the button fill the complete width of the container. The default is off.
    • Title - If you want text to be displayed in the tooltip when the button is rolled over, enter it into this field.
  8. When you are finished, click on the green Create button and your Button widget will show up on the page.
  9. Make sure to click either the Publish or the Save Draft option just as you would when you're editing pages.


Recommendation - To get an actual "button" look, a color other than none needs to be picked in the "Color" field.


Campus Suite Tip - The alternative way to creating buttons is to simply make a link on a page, select it, and select the desired button style from the "styles" context-sensitive menu in the Html WYSIWYG widget.