Button

Button

Button or in general anchor links are used in web design to redirect users to another page or to the different content of the same page.

Buttons are used amazingly nowadays. There are so many use cases of buttons or anchor links besides shifting users to a different page like open popup, scroll to other elements, add a product to cart and many more.

Pro tip
Buttons are easy to track, use it for user engagement tracking purpose.

How to use the Button block of The Plus Addons For Gutenberg

The Button block comes with multiple functions. Let’s understand how to use this block in the tutorial below.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add a Button to the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Button after “/” sign, eg.“/Button”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Select Style

Select your preferred layout for the button here. We provide tons of them.

Title

An input to add the title text for the button.

Link

A destination page URL for the button when clicked.

Layout

Alignment

Align button text in the left, center or right direction from here.

Icon

Icon Type

A selection for icons, whether you want it or not.

Select Icon

On selection of Icon in the previous dropdown, you’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done then you’ll be able to use pro icons too.

2. Style

The Style tab is used for customizing the appearance of all the Button components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Button

Typography

Assign a size, weight, spacing and much more to fonts.

Text Color

A color picker to assign a suitable color to the text.

Icon Color

A color picker to assign a suitable color to the button icon.

Background

Apply suitable background like color/ gradient to the button text.

Border

Draw a border around the text and give width and color to it.

Border Radius

Set the radius curve of the button’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to button.

Padding

Put in some inner space to an element.

Icon

Icon Position

Set icon before/ after button text.

Icon Spacing

Manage space between icon and heading text.

Icon Size

Manage icon size from here.

Extra Option

Interval Shake

Enabling interval shake effect, the button will have a shaking kind of animation.

Interval Shake Duration ⭐

Button will have shake animation after this many seconds repeatedly.

Content Hover Effect

Option for Enable Hover Effect.

Select Effect

Select your preferred effect using the dropdown. We give so many effects to blow your mind.

Shadow Color (Float Shadow/Grow Shadow/Shadow Radial)

A color picker to assign a suitable color to the shadow.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Note : ⭐ Symbol as a suffix displays a Pro feature field.
Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.