Buttons Widget

Buttons Widget

Last updated 02.13.25

The Buttons widget allows for the addition of one or two buttons anywhere a widget can be added. These buttons can be linked to a page, an anchor, a document in the media library, an email or an external URL. This widget allows for flexibility in building your custom elements.  

Add Buttons to the Page

  1. Select where on the page you would like to add one or two buttons 
  2. Click on the blue plus add widget icon   
  3. Select the Buttons widget from the widget pop up 
  4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Buttons Properties

  1. In the Buttons properties pop up, adjust various settings including alignment, number of buttons (1-2), button text, button style and button color. Note each button is styled separately. They can be different colors and styles.
  2. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Buttons Widget

Hover over the Buttons widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Buttons Widget

Hover over the Buttons widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Button Widget Properties

PROPERTYDESCRIPTION
Button Alignment  Select where within the grid cell the button(s) will be aligned
Center  
Left  
Right  
Additional CSS Class  Custom CSS elements added in partnership the development team
Button Properties: Number of ButtonsThe widget can feature none, one or two buttons by selecting a number from the menu. If the user selects  0 then no buttons will display.  Anything other than 0 and the Button and the below properties will display  
[Button] TextEnter text to be featured on each button. Typically shorter text is better for ease of reading and to keep the design tidy. If text field is blank, the button will not display.
[Button] StyleSelect pre-built style options from the menu. Note that if two buttons are featured, each one may have its own style. Below is the list of styles that can be selected:
Default - a rectangular shape with a solid-color fill
Round - a pill shape with a solid-color fill
Radius - a rectangle with slightly rounded corners with a solid-color fill
Hollow - a rectangular outline shape with a transparent fill
Expanded - an extra-wide rectangular shape with a solid-color fill
Disabled - a rectangular shape faded back to denote that it is disabled
Clear - a transparent button with only text visible
[Button] ColorSelect from your custom brand colors or grayscale options from the menu for button fills or outlines. Note that if two buttons are featured, each one may have its own color. Below is the list of colors that may be selected:
Default  
Primary Color  
Primary Color – Light  
Primary Color – Dark  
Secondary Color  
Secondary Color – Light  
Secondary Color – Dark  
Gradient  
White  
Light Gray  
Medium Gray  
Dark Gray  
Black 
[Button] Target Below are the targets to choose from:
Default – this will open in the same tab of the browser and is typically used to move around within your site
Blank – this will open in a new tab of the browser and is typically used for links that leave your site
[Button] Target URL Select Page
Checked: clicking the Select Button opens a dialog box to access content pages within the current site only.
Note that it is possible to type directly in the Target URL field to add the URL to an anchor tag within the site, to type in a third-party URL to leave the site, to open an email (mailto: emailaddress.com) or link to a phone number (tel: 000-000-000).
Unchecked: opens dialog box to specifically access the Media Library to select an image or document.

Examples

All color options in the Default style transformation.
All color options in the Round style transformation.
All color options in the Radius style transformation.
All color options in the Hollow style transformation.
All color options in the Expanded style transformation.
All color options in the Disabled style transformation.
All color options in the Clear style transformation.