Genesis Blocks

Create effective content faster.

You are here: Home / Button Block

Button Block

IMPORTANT NOTE: Genesis Blocks 2.0.0 removes the Button block from Genesis Blocks and replaces it with the WordPress® core Buttons block.1

Updating your plugin to version 2.0.0 will automatically convert your Genesis Blocks Button blocks to core Buttons blocks when opening the block editor. The buttons should look mainly the same, but there could be some styling changes, especially if you have custom styling for classes other than gb-block-button.

The Button block allows you to add a customizable button to your posts and pages. This block also comes with settings for changing the link target, button shape, button size, and button colors.

Table of Contents:

General settings

General settings in the Button block

Click image to enlarge

  1. Alignment: Choose whether the button should be aligned to the left, in the center, or to the right of the page.
  2. Button Text: Place your cursor directly on the button to add your custom button text. For example, your button might say Contact Us.
  3. Button URL: Where do you want the user to go when they click the button? Paste that URL here. Or you can start typing the name of a post or page on your site to link to.
  4. Open link in new window: Enable this option if you’d like a new window (or tab) to open when someone clicks the button.
  5. Button Size: Choose whether the button is small, medium, large, or extra large.
  6. Button Shape: Choose whether the button has square corners, rounded corners, or is “pill shaped” (circular).

Color settings

Color settings in the Button block

Click image to enlarge

  1. Button Color: Click the colored circles to select a pre-defined background color. Or click Custom Color to select your own.
  2. Button Text Color: Click the colored circles to select a pre-defined button text color. Or click Custom Color to select your own.

Advanced settings

Advanced settings in the Button block

Click image to enlarge

  1. Additional CSS Class(es): You can add one or more CSS class to customize the appearance of the button. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.