ZeGuten — a collection of blocks for Gutenberg Get for $15.00

Button block overview

ABOUT THE AUTHOR

SEO copywriter at Gutenix Team

How to add About block in Gutenberg
Prew post
  • Feb 26, 2020
  • 3 min read
  • 106

Button block overview

From this quick overview, you will find out more about the WordPress button block. We will also learn how to customize this block in the Gutenberg editor.

Primarily, let’s set an attractive background for the block, where we will showcase our buttons. To add button to WordPress editor area, you need to click on the “+” icon, type the “buttons” text and pick the block.

Let’s create four button WordPress blocks. We’ll need it to show different styles and customize each button in its own manner.

Take a look at the settings toolbar, which appears above the button block. It contains a number of features, that you can apply while working with a button. Firstly, you can move your elements right and left.

You are also able to add a link to the button WordPress block, make the text bold or italic, implement inline SVG or image.

Now let’s start customizing the button block! We will give the button an outline style, but you can also leave it as default (fill) to give it a background color.

In the next tab, you will give your button block a text color. As you can see, you can pick one of the default colors, or set your own custom color.

As well as the text color, you may set a background one. What is more, in case the combination of the text and background colors would be uncomfortable for the visitors’ eye, you’ll be given a note of warning.

Moving to the next element of the button WordPress block, you will learn how to set a gradient background without any effort. You can not only pick it from the custom gradients but also set the custom one.

In addition, you can set a pin or remove it, if you want to. Choose the gradient type and the angle as well.

We’re almost ready! Now let’s explore the possibilities of adding a border radius and a link to the button for WordPress. You can also enable the link to open it in the new tab.

After you have added button to WordPress, you can also give the block an additional CSS class in the Advanced tab. It is a quite useful tool because you can further use this class to style the block via the Customizer.

We hope you liked our simple and quick Gutenberg button WordPress block overview. Subscribe to our newsletter and stay in touch for more useful tutorials and instructions!

1
Appreciate
Spacer block overview
Next post
How to add About block in Gutenberg
Prew post
Spacer block overview
Next post