Button Widget

The Button widget allows you to create linkable buttons and add them to the landing page grid section or as a "child" element to another container widget such as the Carousel, Grid or Flex widgets, for example. 


The initial style of the button will be the full width and height of its container. See Fig 1 below.

You may increase or decrease the size of the button by clicking on the "diagonal arrows" icon at the bottom right of the button and dragging horizontally, vertically or diagonally.


Fig 1



The Button widget has three menus (see Fig 2 below).

Fig 2

General menu

The General menu for the Button widget is very simple and contains only one feature, Link Action (see Fig 3 below). A more detailed description of the feature can be found by clicking this link: Link Action Article.

Fig 3

Style menu

The Style menu for the Button widget conforms to the general Style menu as described in this article: Style Menu Article, but also contains additional features as described below.

  • The Full Width and the Full Height features (see Fig 4 below), will be toggled "on" by default. This means the button widget will fill its container. Toggling them "off" will shrink the button to its default size, leaving an initial margin around the button and the inside of its container (see Fig 5 below). You can use the "diagonal arrows " icon to increase the size of the container relative to the size of the button.  See Fig 6 below. The primary use for this is to allow you to quickly create a wider or taller button. See Fig 7 below which shows the effect of toggling "off" the "Full Height" feature after increasing the width of the container, but leaving "Full Width" toggled" on". 

Fig 4

Fig 5

Fig 6

Fig 7

  • The Widget Alignment feature (as generally described in the documentation covering the basic "Style Menu" functions - see Fig 8 below) allows you to justify the button to the center (the default value) of the container assuming you do not have "Full Width" and "Full Height" set (see Fig 9 below), the left or the right of the container assuming you do not have "Full Width" set, or to the top or bottom assuming you do not have "Full Height" set. See Fig 10 below for an example of Widget Alignment set to "right" and "top". 

Fig 8


Fig 9

Fig 10

  • The Text Toolbar feature (see Fig 11 below) allows you to modify various styles of the button label such as font family, font size, line height in case of multiple lines, letter spacing, word spacing, font weight, italics, underline, and font color of the button label text, which will be initially set at the Global Setting defaults you have specified. Please note that you can also set the button label color via the right hand-hand Style menu using the Color feature. 

Fig 11

  • The Scale feature (see Fig 12 below) allows you to scale the button and its label up or down proportionately using a scaling factor from ".5" to "1.5". The actual scaling effects of this feature will depend on the starting size of the button and label as set by you.

Fig 12

Hover menu

The button Hover menu is essentially a clone of the button Style menu's stylistic features, and its purpose is to allow you to create a different style for the button when a page visitor moves their cursor over it in the browser.


The easiest way to illustrate the use of the Hover menu is with an example. Fig 13 below shows the base-rendered version of a Button widget that has been styled using the Style menu. Figs 14 shows the same Button widget using the Hover menu. 

Fig 13

Fig 14