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 widget.


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

Fig 1

General menu

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

Fig 2

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 five additional features as described below.

  • The Full Width feature (see Fig 3 below), when toggled "on", increases the horizontal width of the button to 100% of the Button container. Fig 4 below shows the button in its default state with the Full Width feature toggled to "off". To better illustrate the effect of this feature, a temporary 1px blue border has been added to the button container.

Fig 3

Fig 4

Fig 5 below shows the toggle set to "on", and Fig 6 shows the results on the button itself.

Fig 5

Fig 6

  • The Label Alignment feature (see Fig 7 below) allows you to justify the button label to the center (the default value), the left or the right.

Fig 7

  • The Text Size feature (see Fig 8 below) allows you to increase or decrease the font size of the button label text, which will be initially set at the Global Setting default size you have specified. You can use the slider control tool for general sizing, or by clicking on the value in the grey rectangle, use the up / down arrows for more fine-tuned control. See Fig 9 below for an example of a change to a higher font-size value.

Fig 8

Fig 9

  • The Color feature (see Fig 10 below) allows you to change the color of the button label font. Checking the feature's box will bring up a rectangle to the right of the feature's name. The rectangle's color will be a representation of the button label's current color. Clicking the rectangle will bring up a color picker which will allow you to use one of several methods to change the label text's color. See Fig 11 below.

Fig 10

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 viewer 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 browser-rendered version of a Button widget that has been styled using the Style menu (See Fig 14 below). Figs 15 and 16 show the same browser-rendered Button widget using the Hover menu and hovering the cursor over the button.

Fig 13

Fig 14

Fig 15

Fig 16