Button module overview

The Button module is an object that you insert into your layout that resembles a physical button. For more advanced features, we recommend that you use the Smart Button module.

Uses of this module

  • Traditionally, a web button is a pretty package for a link that sends visitors elsewhere when clicked.
  • The Button module’s button can also open a lightbox that displays a video or any other content that you can insert with shortcode or HTML.

Button examples

Button style

Default button style

By default, the color and hover color of buttons are the theme’s accent color and accent hover color, respectively. Those defaults should have been implemented by your Blackbaud Consultant. 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.

Custom button style

Here are some examples of the Button module’s style options:

Here are the details of the settings for each button example shown in the screenshot.

  1. Width = Auto
    Background style = Flat
    Background animation = Disabled
  2. Padding = 30px
    Typography: Font family = Montserrat Alternates; Weight = Medium; Size = 24 px; Line height = 1.2 em;
    Background color = #003b51; Background style = Gradient
    Border: Style = Solid; Color = #rgba(86,0,60,0.93); Width = 20px;
  3. Text color = #00185b
    Background color: rgba(255,255,255,0) (i.e., transparent)
    Border: Style = Solid; Color = #910026 Width = 2px
    Border radius: Upper left = 15px; Lower right = 15px
    Box shadow: Color = #66002c; X = 4px; Y = 4px; Blur = 8px
  4. Background color = rgba(0,93,127,0.50) (50% opacity); Background style = Gradient
    Border box shadow: Color = #005d7f; Blur = 8px
  5. Width = Full width
    Padding = 30px
    Typography: Font family = Encode Sans Expanded; Weight = Semi-bold; Size = 24 px;
    Background color = #009966; Background style = Flat

There are also options for setting different button hover styles, as described in the Style tab details below.

Click Action: Link or Lightbox

You can set the button’s click action to either a link or a lightbox.

Set the Click Action to a link

When you set Click Action to Link, a Link section opens.

  • Enter the URL to the link or click Select to choose a page or post from your site.
  • Set Link Target to determine whether the linked page replaces your current page in the same tab ( Same Window) or opens in a new tab (New Window).
  • The Link No Follow field tells search engines whether or not to follow the link. The default is No, which tells search engines to follow the link. Yes means “Yes don’t follow the link.” For more information about when to use nofollow, see the Google webmaster article.

Set the Click Action to a Lightbox

If you choose the Lightbox option, you next choose whether the lightbox content will be based on custom HTML content or a link to a video, as described in the following sections.

HTML content

With the HTML content type option, an HTML editing box lets you enter custom HTML that will be displayed in the lightbox. This works great for adding shortcodes. In the following screenshot, the shortcode for a saved row containing a Info Box module was inserted into the HTML box to make an opt-in popup.

Video Link

The video option works well as an alternative to embedding the video in the page. Insert the URL of the video you want to open in the lightbox, from a service such as Youtube or Vimeo.

Button settings

General tab

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 is a URL field. With Lightbox, there is 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 previous sections.

Style tab

The Style tab is shown in the screenshot and described below.

1 Top section

  • Width
    Auto width: Width adjusts to fit the text and icon.
    Full width: The width expands to the content area minus the module’s margin settings.
    Custom: You can set a custom width in px, vw, or % although we don’t recommend that you update this setting.
  • Align (responsive)
  • Padding (responsive): Set a specific padding value in pixels. Click the Link icon to automatically make all four padding values the same.

2 Text section

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

3 Background section

  • 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

See the Related Article for more information about the settings in the Border section.

Advanced tab

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