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 (Carousel, Grid, Flex, etc.).  


The initial style of the button will be the full width and height of its container (Fig 1). 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 (Fig 2): 

  • General
  • Style
  • Hover 

Fig 2

General menu

The General menu for the Button widget is very simple and contains only one feature, Link Action (Fig 3). 

Fig 3

Style menu

The Style menu for the Button widget conforms to the general Style menu look and feel, but also has the following features: 

  • Full Width / Full Height: These features are toggled on by default (Fig 4). 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 (Fig 5). You can use the "diagonal arrows " icon to increase the size of the container relative to the size of the button. 

Fig 4

Fig 5

  • The Widget Alignment feature allows you to justify the button to the center (the default value) of the container (Fig 6). By changing the horizontal and vertical alignment, the location of the button within the container changes (Fig 7). 

Fig 6


Fig 7

  • The Text Toolbar feature allows you to modify various styles of the button label including font family, font size, line height in case of multiple lines, letter spacing, word spacing, font weight, italics, underline, and font color (Fig 8). 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 8

  • The Scale feature allows you to scale the button and its label up or down proportionately using a scaling factor from .5 to 1.5 (Fig 9). The actual scaling depends on the starting size of the button and label.

Fig 9

Hover menu

The Hover menu lets you different style for the button when a page visitor moves their cursor over it in the browser.


Learn more about the following features by reading their respective articles below: