Before version 5.8, WordPress was using a Classic Editor without basic features. You need to rely on third-party plugins for creating simple elements like buttons and tables. However, the latest Gutenberg editor offers block based interface which includes a button block to create buttons on your pages simple and easy. Whether it be for a Call-To-Action (CTA) or a button on your sidebar, you can use the button block in Gutenberg block editor to quickly create custom buttons and style them as per your branding and design preferences.
Gutenberg Button Block
The button block as the name suggests provides a convenient option inside the Gutenberg block editor to create buttons and fill up with relevant content and hyperlinking to appropriate webpage. To kick this tutorial off, let’s start with basics of adding and styling a button with the built-in controls that are native to the Gutenberg block editor.
- To open the button block, click on the plus icon, i.e., “Add Block (+)” button and select “Buttons”.
- Click on the “Toggle block inserter” and select “Button” block available under “Design” group.
- You can just type /button and go from there as well.
Adding Button Text & Hyperlinks
After creating a button, click on it and add your text. You can use the pop-up toolbar to bold, italic, highlight, strikethrough and other options that you can find with any text based blocks in Gutenberg. You can also change the alignment and justification to position your button on the layout.
To link the button to a specific URL, click on the chain icon in the toolbar.
- Enter a keyword and WordPress will automatically show the relevant URLs from your site. Select the page you want to link and turn on “open in new tab” option to open the link in a new browser tab.
- When you want to link an external page, simply paste the page URL and click “Submit” button.
- You can add the attributes to button link under “Advanced” settings from the sidebar.
Remember, the link color is generally controlled by your theme’s style which may not be applied when you create button in the editor. Therefore, make sure to preview the button and use correct color/background colors so that the text is visible.
Horizontal and Vertical Buttons
A key thing to note is that every button block has an external wrapper around the button. You can click a bit horizontally away from button to see a + icon appears showing “Add Button” text.
Click on the plus icon to automatically add more buttons in the same block. When you add multiple buttons in the wrapper, by default they will be aligned horizontally. You can see different top toolbar and sidebar settings appears now. adjust the block spacing and alignment to adjust the horizontal button group in your site’s layout.
You can change the alignment to a vertical display using vertical orientation option under layout setting from the sidebar.
Customizing Buttons in WordPress
Upon inserting a button block, you will find the block styling options available on the sidebar settings panel. You can use these default WordPress options to customize the appearance of your buttons. Remember, these options are for single button and the option will change when you select the button group as shown above.
- Styles – You can either choose a color filled style or just an outline around the button from this editing option. You can also set a default styling preference by selecting one of the two options as your “Default Style”.
- Color – Setup your text color in the button by selecting from one of the default options or adding custom color code. Similarly, you can also setup the background color for your button, be it a solid color or a gradient.
- In addition to the built-in gradients, you can create your own custom gradient by adjusting the gradient color bar and select linear or radial direction.
- Border – The border styling option provides you with options to adjust the border radius to make the button rounder. So, you can change your button style from a complete rectangle to a full round button. All you need is to adjust the pixel size of the border radius and find a radius that fits your styling preferences. Click on the px to change the measurement unit from pixels to %, EM, REM, VW or VH.
- Width – By default, the width of your button will be determined by the size of your content plus a little bit of padding on each side. Here, you can change the button width by 25%, 50%, 75% or even 100% of the container width. To un-do a width setting, instead of clicking another width option, just click the same width a second time and the editor will deselect it and go back to default width.
- Typography – You can also change the size of the button text from the typography styling tab. Select one of the pre-built font sizes or enter a custom pixel size for the font.
- Dimensions – Change the padding on the button by entering a specific pixel amount which will adjust the button padding accordingly. You can enter a single value for all four sides or click “Unlike Sides” icon and provide top and bottom padding.
- Advanced – Last but certainly not the least, we have the “Advanced” setting. Here, you can include additional CSS classes and HTML anchors to customize the button further. As mentioned above when linking the button text, you can add the “rel” attributes in “Link rel” text box. For example, you can add nofollow in the box to make the button link nofollow.
Note: You can use the same Gutenberg button block and add buttons in your site’s sidebar and footer widgets area.
Gutenberg Buttons Patterns
In addition to creating simple and button groups with Gutenberg, you can use patterns to insert predefined block of buttons in WordPress.
- Click the + icon showing as “Toggle block inserter” on top left corner of Gutenberg editor.
- Go to “Patterns” section and filter “Buttons” from the dropdown list.
- You will find a list of predefined button block patterns.
- Click on the block you want and insert in content area.
You can add the button block and patterns as a reusable block and insert anywhere in your site.
Other Options to Create Buttons in WordPress
In addition to using the Gutenberg button block, you can use different options for creating buttons in WordPress:
- Commercial themes and plugins offer custom button block. It either has additional options to default block or allows you to create a button and use with shortcode. For example, you can use the Shortcodes Ultimate plugin to create buttons with 3D press effect.
- You can use blocks plugin like Ultimate Addon for Gutenberg or Kadence Blocks to create beautiful buttons.
- Copy and paste button patterns code from WordPress block patterns directory.
- Final option is to create your own custom buttons with CSS and insert on Gutenberg editor using Custom HTML element.
Final Words
And, well that’s about creating buttons in WordPress site. Styling and creating buttons from the Gutenberg button editor is a simple yet effective process. This is mainly due to the availability of a host of different in-built styling options provided by Gutenberg button block.
