To add a button, click on the Add Block button and select the Button block. Alternatively, you can start typing
/button in a new paragraph block, then press enter.
Each block comes with unique toolbar icons and specific user controls that allow you to manipulate the block right in the editor.
Right after inserting the block, you can click on the button to type a call to action text. Also, you would be able to paste a URL of the page you’d like to redirect the users to.
You can choose the text and background colors for your button. Selecting proper colors will help you to make the button stand out and make sure to find a nice contrast for readability purposes.
A block-specific toolbar will appear whenever you select the button block. Three of the options are for the block’s alignment, right, center, and left. Choosing the right or left will allow you to place another block alongside the button block moreover picking center will return the block to its default, taking up the full width of the post or page content.
This control offers left, right, and center alignment responsive classes that can be used to realign the block’s position with the same viewport width breakpoints as the grid system. Basically, they work just like the usual alignment classes, except that they have suffixes that represent the breakpoint from which they come to effect.
The button block includes three styles, Rounded, Outline and Squared:
A rounded style gives the button element rounded corners which looks like this:
An outlined button style has a border layout that looks like this:
A squared style gives the button element sharp corners which looks like this:
In addition to the options found in the block’s toolbar, you may locate the block specific settings in the editor sidebar panel. Clicking on the cog icon next to the publish button will toggle the visibility of this panel.
The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and apply styles to the block as you see fit.