Buttons are an integral part of any website. It is one of the most simple UI elements but a very important one. A website is incomplete without it. The main purpose of this advanced buttons block is to make more advanced buttons that capture the attention of your visitors.
How to use the Advanced Buttons Block of The Plus Addons For Gutenberg
The Advanced Button block comes with various creative styles to create awesome buttons. Let’s understand how to use this block in the tutorial below.
Gutenberg gives multiple ways to add Advanced Button into 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 Advanced Button after “/” sign, eg.“/Advanced 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.
Select the Button type of the button you want to display. You can select between CTA Button and Download Button.
Select any one style of the button you want to display.
Add your button text here.
Add the link of your button here.
Adjust the alignment of the button here.
The Style tab is used for customizing the appearance of all the Advanced Button block 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
Advanced Button Style
Set the Outer Border Height/Width, Padding, Typography, Text Color, Background Type, Border Type, Border Radius, and Box Shadow effects here.
Download Text Style
Set the Padding, Top Offset, Right Offset, Typography, Text Color, Background Type, Border Type, Border Radius, and Box Shadow effects here.
Set the Background Type, Border Type, Border Radius, and Box Shadow effects here.