---
title: Button
description: "The ShapeBlock Button Block lets you create customizable buttons for links, calls to action, and other important actions on your website. You can customize the button text, link, icon, alignment, colors, typography, borders, spacing, gradients, and hover effects. ## How…"
url: "https://shapekode.com/product/shapeblock/docs/button/"
updated: "2026-10-15"
category: Content Block
---

# Button

The ShapeBlock Button Block lets you create customizable buttons for links, calls to action, and other important actions on your website. You can customize the button text, link, icon, alignment, colors, typography, borders, spacing, gradients, and hover effects.

## How to Add a Button Block

Follow these steps to add and configure the Button Block in the Gutenberg editor.

### Step 1: Add the Button Block

1. Open a page or post in the WordPress Gutenberg editor.
2. Click the **+** button to open the block inserter.
3. Search for **Button** under ShapeBlock.
4. Insert the Button Block into your page.
5. Select the block to access its settings in the right-hand sidebar.
6. Edit the button text and configure its link using the available settings.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-24.png)

### Step 2: Configure the Button Block

Select the Button Block and open its settings in the right-hand sidebar. The available tabs are:

- **Settings:** Configure the button text, URL, link behavior, and icon.
- **Layout:** Control the button position, content alignment, minimum width, and icon spacing.
- **Style:** Customize the button type, typography, colors, background, borders, shadows, spacing, gradient borders, and icon appearance.
- **Advanced:** Configure the block's outer spacing and background.

## Settings Tab

The Settings tab contains the **Content** panel, where you can configure the button's text, link, and icon.

### 1.Content

- **Button Text:** Enter the text you want to display inside the button. For example, you can use "Learn More", "Get Started", or "Contact Us".
- **Button URL:** Enter the destination URL that visitors should open when they click the button.
- **Open in New Tab:** Enable this option to open the linked page in a new browser tab. Disable it to open the link in the current tab.
- **Add Nofollow:** Enable this option to add the `nofollow` attribute to the button link. This can be useful when you do not want search engines to treat the link as a regular endorsement.
- **Icon:** Choose an icon to display alongside the button text. You can use the Layout and Style tabs to configure the icon's position and appearance.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-19.png)

## Layout Tab

The Layout tab controls the button's position, content alignment, minimum width, and icon spacing. Some options are available only when an icon is selected.

### 1.Layout

- **Icon Position:** Choose where the icon appears relative to the button text.
  - **Before Text:** Displays the icon before the text.
  - **After Text:** Displays the icon after the text.
- **Icon Spacing (px):** Set the space between the icon and the button text in pixels. This option appears when an icon is selected.
- **Button Alignment:** Choose how the button is positioned within its available row.
  - **Default:** Uses the default positioning.
  - **Left:** Positions the button on the left.
  - **Center:** Positions the button in the center.
  - **Right:** Positions the button on the right.

You can configure this setting separately for desktop, tablet, and mobile devices.

- **Minimum Width (px):** Set the minimum width of the button in pixels. Use this option to maintain a consistent button width, even when the button text is short. You can adjust the minimum width for desktop, tablet, and mobile devices.
- **Content Alignment:** Choose how the button's internal content is aligned.
  - **Left:** Aligns the content to the left.
  - **Center:** Centers the content.
  - **Right:** Aligns the content to the right.

You can configure content alignment separately for desktop, tablet, and mobile devices.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-20.png)

## Style Tab

The Style tab contains three panels: Button, Border Gradient, and Icon. The Icon panel appears only when an icon is selected.

### 1. Button

Use the Button panel to customize the button's appearance, typography, and spacing.

- **Button Type:** Choose the button's visual style.
  - **Primary:** Displays the button using its background and text styling.
  - **Outline:** Displays an outlined button style.
  - **Icon:** Displays an icon button style.
- **Typography:** Customize the button text's typography, including the available font family, font size, font weight, font style, text transformation, line height, and letter spacing. You can configure typography separately for desktop, tablet, and mobile devices.
- **Normal and Hover States:** Use the Normal and Hover tabs to customize the button's appearance in different interaction states.
  - **Normal:**
    - **Text Color:** Set the button text color.
    - **Background:** Choose a solid background color or gradient.
    - **Border:** Configure the border width, color, and style.
    - **Box Shadow:** Add a shadow to the button and customize its appearance.
  - **Hover:**
    - **Text Color:** Set the text color when visitors hover over the button.
    - **Background:** Configure the background color or gradient for the hover state.
    - **Border:** Customize the button border on hover.
- **Margin:** Set the outer spacing around the button. You can configure the margin for desktop, tablet, and mobile devices.
- **Border Radius:** Adjust the rounding of the button's corners. You can configure the top, right, bottom, and left corners independently.
- **Padding:** Set the space between the button content and its inner edges. You can configure the padding for desktop, tablet, and mobile devices.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-21.png)

### 2. Border Gradient

Use this panel to create a gradient border around the button.

- **Border Width (px):** Set the width of the gradient border in pixels.
- **Gradient Border:** Enable this option to apply a gradient border. The gradient border settings appear when this option is enabled. To create a gradient fill inside the button, use the Gradient option in the Background control under the Normal or Hover state.
- **Gradient:** Choose a gradient for the button border. You can select from the available gradient presets or customize the gradient.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-22.png)

### 3. Icon

The Icon panel appears when an icon is selected in the Settings tab.

- **Size (px):** Set the icon's size in pixels. You can configure it separately for desktop, tablet, and mobile devices.
- **Box Width (px):** Set the width of the icon's container in pixels. You can configure it separately for desktop, tablet, and mobile devices.
- **Box Height (px):** Set the height of the icon's container in pixels. You can configure it separately for desktop, tablet, and mobile devices.
- **Box Border Radius:** Adjust the rounding of the icon container's corners. You can configure each corner independently.
- **Normal and Hover States:** Use the **Normal**and **Hover**tabs to customize the icon's appearance.
  - **Normal:**
    - **Color:** Set the icon color.
    - **Background:** Choose a solid background color or gradient for the icon container.
    - **Rotation (deg):** Rotate the icon by the specified number of degrees.
  - **Hover:**
    - **Color:** Set the icon color when visitors hover over the button.
    - **Background:** Customize the icon container's background color or gradient on hover.
    - **Rotation (deg):** Set the icon's rotation for the hover state.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-23.png)

## Advanced Tab

The Advanced tab provides additional spacing and background controls for the Button Block. These settings apply to the entire block, not just the button itself.

### 1. Spacing

- **Padding:** Set the inner spacing around the entire Button Block. Configure the top, right, bottom, and left values separately.
- **Margin:** Set the outer spacing around the entire Button Block. Configure the top, right, bottom, and left values separately.

Both controls support responsive settings for desktop, tablet, and mobile devices.

**Note:** These spacing controls apply to the entire block and are separate from the button padding and margin options in the Style tab.

### 2. Background

- **Background:** Customize the background of the entire Button Block using a background color or gradient.

**Note:** This background applies to the entire block area, not the button's own background.