Menus, buttons and links are essential for enabling people navigate websites and here I show how to do amazing things with buttons you never realised you could do. Use these new WP tools.
Some people hate the Gutenberg block editor in WordPress, but others love it. One thing is for sure, the editor has never had so many updates so fast before. There was hardly an update for years, but now there are new features with every WordPress update.
There is now a useful Button block that enables you to create buttons for your website or blog and it is worth getting to know, because it has some powerful features.
Buttons have always been possible in WordPress and you could always design a button in a program like Photoshop or GIMP. Save it as a JPEG or PNG and then upload it to your site. Insert it into post or page and add a link to it to go to wherever you want to send people.
If you want to design your own unique buttons, this is still a good way to do it, but it is a lot of work. Also, adding images to posts makes them slower to download and speed is everything these days.
The Button block is a recent addition to the Gutenberg editor and it enables you to create and design buttons on the page. Colours and styles can be set, and you can easily create buttons that fit in with your site’s theme.
They use a fancy bit of CSS and HTML to create the buttons, so there is no image to bloat the page or slow it down. Unless you want to add an image of course, and that is an option I will cover.
So, let’s see how to create buttons in the Gutenberg editor in WordPress.
Add a button block
To add a button to a WordPress post, mouse over a block and click the plus button below it to add a new block. Expand the Layout Elements category and click Buttons to insert it.
Add caption, add more buttons
A simple black button is added to the page. Click the button to position the text cursor in it and start typing to add a button caption. To the right of the button is a plus and clicking it enables more buttons to be added. You could have a whole row of buttons.
Set the button style
Click a button to select it and then click the rectangle icon in the block toolbar. It becomes a double arrow when clicked. A couple of options appear and filled on outline buttons can be created.
It is also possible to select the button style in the Block sidebar on the right. You can also set a fill colour and have an outline or border too.
Select the button colors
With the button selected, use the sidebar to set the text color and the background color. Click the color blobs or click Custom color and define your own color.
This might be needed to make sure a button uses the same color as your theme. The RGB value can be used, which looks like #00a8b0, or you can simply point and click on a color palette.
Look out for warnings that the colors chosen are hard to read for some people. Bear this in mind.
Add special features to buttons
Select a button and then click the little down arrow at the right side of the block toolbar for a menu. There are a couple of text options, inline code (some HTML), and an inline image.
Images are not essential, but let’s look at the option anyway. It might be useful if you are making buttons to sell or give away products for example.
Add an image to a button
I cannot imagine why anyone would want a picture of me on a button, but it shows what is possible. Create a small image, click the down arrow in the toolbar and select Inline image. Then select the image in the media library in the usual way.
Use gradient fills for buttons
Go to the color section of the sidebar on the right and under Background is Solid and Gradient. Select Gradient and a horizontal color bar appears below the color palette. There is a circle at either end. Click each circle to choose the start and end colors for the gradient fill.
There are two types of fill and the first is linear (vertical, horizontal, and the other is circular from the centre out. Try each one. With the linear type, change the angle to whatever you want. In the image above, it runs from top left corner at 45 degrees down to the bottom right corner.
Add more colours to gradients
Click in the color bar and a third color can be added, and a fourth. See the three circles in the gradient bar above? Click them to set the three colors – mine goes from orange to dark red to blue. The text color was also changed to white.
Choose the corner type
So far, the button has had curved corners, but this is optional. Scroll down the sidebar on the right to Border settings and expand it if necessary. Drag the border radius to select the amount of curvature on corners. A value of zero means rectangular corners.
Add the button URL
You want the button to actually do something and perform an action, like going to a new page, so click the link button in the block toolbar and enter a URL.
There is an option to open the new page in a new tab. Mostly, links should open in the same tab, but occasionally, perhaps when sending people off-site, you might want to open it in a new tab.
Related:
