Button or in general anchor links are used in web design to redirect user to another page or to a different content of the same page.
Buttons are used amazingly now a days. There are so many use cases of buttons or anchor links besides shifting user to different page like open popup, scroll to other element, add product to cart and many more.
Configuration for Button
Most important thing for button is it’s attractive UI. No user will get attracted to any basic looking link and will click on it. Animation and relative looking UI for buttons are basic factors to engage the user to use it’s functionality.
Gutenberg gives multiple ways to add button 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 widgets panel.
After placing the widget you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.
Select Style ⭐
Select your preferred layout for button here. We provide a tons of them.
An input to add the title text for the button.
A destination page URL for button when clicked.
Align button text in left, centre or right direction from here.
A selection for icon, whether you want it or not.
On selection of Icon in previous drop down, you’ll be displayed whole list of icons provided by the FontAwesome icon library. If you have purchased licence for pro plan and activation has been done then you’ll able to use pro icons too.
The Style tab is used for customising the appearance of all the Button components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.
View The Style Tab Article
Assign size, weight, spacing and much more to fonts.
A color picker to assign suitable color to the text.
A color picker to assign suitable color to the button icon.
Apply suitable background like color/ gradient to the button text.
Draw a border around the text and give width and color to it.
Set the radius curve of the button’s corner.
Give Box/Text/Drop shadow effect and color to button.
Put-in some inner space to an element.
Set icon before/ after button text.
Manage space between icon and heading text.
Manage icon size from here.
Interval Shake ⭐
Enabling interval shake effect, button will have shaking kind of animation.
Interval Shake Duration ⭐
Button will have shake animation after this much seconds repeatedly.