Button Group

A button group module is a way to display multiple buttons in a single column, either horizontally or vertically.

It's based on the Button module, so the settings are very similar.

In the Button Group module, there's a Style tab that applies to all of the buttons, and then there's a Style tab for each button you create. Any setting on an individual button's Style tab overrides the global setting for the button group.

Tip

If you're using the Beaver Builder Theme, the buttons' initial style comes from the settings at Customize > General > Buttons. The button's default text color is white text for darker accent colors and black text for lighter colors. The default font family for the button text depends on the font family set for the <body> tag.

We'll break down the settings by global button tabs and single button tabs.

Global button tabs

Buttons Tab (global)

This tab is where you create each button. Click Edit button to configure the first button, and Add button to create each additional button.

Style Tab (global)

This tab has four sections: a top section, Text, Background, and Border.

1 Top section (global)

  • Layout
    Choose a horizontal or vertical placement of the buttons.
Tip

Enter R on the keyboard to enter Responsive Mode to compare layouts at different screen sizes.

  • Align
    See this article for a description of how the alignment toggle settings work.
  • Space between buttons
    Increase or decrease the amount of horizontal or vertical space between buttons.
  • Padding
    Increase the space between the edge of the buttons and the button text.

2 Text section (global)

  • Text color
    Set the button text color in the resting state.
  • Text hover color
    Set the button color on mouse hover. If this setting is left blank, the Text color setting applies for hover also.
  • Typography section
    See this article about the Typography section settings.

3 Background section (global)

  • Background color
    Set the fill color for the button in the resting state.
  • Background hover color
    Set the button's fill color on hover. If this setting is left blank, the Background color setting applies to hover also.
  • Background style
    Flat: consistent fill color
    Gradient: gradient of the background color, lighter on top and darker on the bottom.
  • Background animation
    Disabled by default. If set to Enabled, there's a 0.2-second linear transition from resting state to hover state.

4 Border section (global)

See this article for more information about the settings in the Border section.

Advanced tab (global)

There are all the usual Advanced tab settings for margins, visibility, animations, and advanced HTML settings.

Single-button tabs

General tab (single)

This tab has the following settings.

  • Text
    The text that appears on the button.
  • Icon
    Optional icon to appear on the button. If you select an icon, there are two additional fields:
    Icon position: Before or after the button text.
    Icon visibility: The icon can be always visible or appear on hover only.
  • Click action
    Link or Lightbox. With Link, there's a URL field. With Lightbox, there's a Lightbox Content section with Content type to either embed content into an HTML field or provide a video link.
    See the click action examples in the Button module article.

Style tab (single)

This tab has four sections: a top section, Text, Background, and Border.

1 Top section (single)

  • Text align
    See this article for a description of how the alignment toggle settings work.

2 Text section (single)

  • Text color
    Set the button text color in the resting state.
  • Text hover color
    Set the button color on mouse hover. If this setting is left blank, the Text color setting applies for hover also.
  • Typography section
    See this article about the Typography section settings.

3 Background section (single)

  • Background color
    Set the fill color for the button in the resting state.
  • Background hover color
    Set the button's fill color on hover. If this setting is left blank, the Background color setting applies to hover also.
  • Background style
    Flat: consistent fill color
    Gradient: gradient of the background color, lighter on top and darker on the bottom.
  • Background animation
    Disabled by default. If set to Enabled, there's a 0.2-second linear transition from resting state to hover state.

4 Border section (single)

See this article for more information about the settings in the Border section.

Last updated on