Have you ever played the game Button, Button, Who’s Got the Button? The version I know – or, at least, I think this is what we called it when we were kids – is one where one person has a button (or marble, or some similar small object) that he hides in one of his hands. Then he holds his hands out, and you have to try to guess which hand it’s in.
Simple, but fun.
Fun because we added the component of playing it on Grandma’s long staircase. And, come to think of it, we never really called it by the name above. We called it something like School. Everyone started on the bottom step, in “Kindergarten”. If you guessed the correct hand, you got to move up a step. If you were the first to the top of the stairs, you got to be the button-holder for the next round.
Like I said…Simple, but fun.
Anyway, the buttons here aren’t anything like that, obviously. The word button just reminded me of that game. (Ah, those were the days!)
There are 4 types of buttons I’ll demonstrate here.
- Basic Buttons
- Advanced Buttons (Publish Press)
- Multi Buttons (Ultimate Addons)
- Marketing Buttons (Ultimate Addons)
Basic Buttons
These are the style that come with native Gutenberg in WordPress. Here’s an example.
When you add a Buttons Block, you’re prompted via text on the button itself to add some text there of your own.
There’s a plus sign at the lower left just below the first button that let’s you easily add another button, sort of like adding more pieces to a Group Block.
As you can see, the first button above is the most basic. I added some text and didn’t make any other changes. The text of the second button I made bold, changed it to black, changed the button style to outline, and made the background color pink (or maybe it’s carmine).
The bold and the black changes I made via the popup bar near the button itself. The style and the background color have to be changed in the right-hand column of the editor, when the button is highlighted.
The changes I made to the last button were to italicize the text using the popup bar, to set the width to 100% using the column at the right, and to change the text size to Large there also. Because of these changes, you most likely see the text wrapping over several lines, depending on your device.
Worth noting is that, in the editor, the buttons are arranged vertically. When I view them on the finished page on my laptop, the first two are one the same horizontal line (because there’s room), and the larger third button is on its own line below them. If you don’t like that arrangement, I’m sure it can be changed.
So, you can see there are a lot of options and potential combinations of options you can use even with just a basic button.
But some people weren’t satisfied with that.
Advanced Buttons from Publish Press
If you have the Publish Press Blocks plugin, you can make buttons like these.
The first one is the default is all respects, except that I changed the actual text.
The next button is Outlined style, and I changed the border radius from the default of 50 to 15. By default, the text is white (even though it looks black in the editor) and the background is white. Curiously, I had to set the text to black (right column) or else it was virtually invisible. That seems like a bug to me.
You can change to a squared style (which is really rectangular), regular or outline. When you hover over a button, there’s a shadow around it. You can change its color, opacity, transition speed, horizontal and vertical offsets, blur, and spread. Obviously, but unfortunately, you can’t see these changes unless you Preview or Publish the post/page containing your button.
As with basic buttons, you can change the text size. You can also change the spacings inside and around it. I added Padding to the top of the one below and changed the text color.
Again, there are many options, most of which obviously aren’t available in a basic button.
Multi Buttons from Ultimate Addons
Here’s a sample of the Multi Buttons.
It wouldn’t be a Multi button if you only got one to start with, so they give you two. And, as you can see, you can add more (by clicking a plus sign after the second one).
They don’t come with icons by default. I added those from a selection of over 1400 icons, found on 72 “pages” in the right column of the editor. I could almost do a whole Post on just those icons. They do appear on the right by default, but you can change that to the left, as I did with the bird. (You can also opt not to have an icon at all, which is actually the default.)
The first button is supposed to have a double outline, but that doesn’t seem to be working.
There are several other options, similar to those mentioned earlier for other buttons, that I won’t go into in detail here.
Marketing Buttons from Ultimate Addons
Finally, this is the Marketing Button. I didn’t change the default title, description, or icon.
I confess that I thought this wouldn’t be that great of a choice before I saw it. I was wrong. Here are all the options for this Marketing Button.
- Text alignment (left, center, right)
- Icon (1400 options again)
- Icon position, spacing, and size
- Spacing between the title (top line) and description (bottom line)
- Title style (H6 by default; choose H1 to H6, span, or paragraph)
- Title and description typography
- Title, description, and icon color and hover color (all individually)
- Horizontal and vertical padding
- Background style (transparent, color, or gradient)
- If gradient, choose linear or radial and angle, opacity, and colors (1 and 2)
- Border style (many), width, and radius
- Border and border hover colors
As you can see above, I did change some of those options. Hover over it to see all of them.
If you use a Table of Contents, as I do above, note that, depending on your TOC settings and the Title style of your Marketing Button, that Title may appear in the TOC. Since my button here has an H6 title and I had my TOC options set to include H6’s in the TOC box, “Subscribe Now” originally showed up in my TOC above. I had to remove H6 from my TOC settings – not a big deal since I virtually never use H6 headings (except in Marketing Buttons like this).
As I’m creating this Post, I notice that my text cursor is having a hard time keeping up with me. And just now my browser tells me that this webpage is using significant energy and that closing it may improve the responsiveness of my Mac. (I’m using Safari.) I suspect that all the buttoning I did above is the culprit. You probably won’t have this problem, since you won’t be adding this many buttons to a single page.
