GeneratePress is designed like a flexible framework, rather than an all-in-one theme. Because of that, GeneratePress doesn’t have any built-in button styles. So we’ll have to add our own.
Fortunately, it’s pretty easy to create buttons in GeneratePress, and there are lots of free options available.
Generatepress Button Options:
- Use the WordPress Button Block (my preferred method)
- Use GenerateBlocks Buttons (same developer as GeneratePress)
- Use a 3rd-party button plugin (like Maxbuttons)
- Create shortcode buttons with Shortcodes Ultimate
Styling Gutenberg Buttons for Generatepress
The WP block editor (known as Gutenberg) is the future of WordPress and will become even more powerful when full-site editing goes live this year (2021).
It ships with more than a dozen built-in blocks, including a Button block. And while the built-in styles are pretty basic, there’s plenty of power under the hood. The button block ships with several styling controls.
WordPress Button Block controls:
- Background color (including gradients)
- Text color
- Border radius
- Border
- Button width (in 25% increments)
- Inline or stacked buttons (create a multi-button)
In fact it has pretty much everything you need to style a good-looking button, with one exception. There’s no hover effects.
It’s a glaring ommission, and I’m sure others agree. I predict hover controls will be added in a future update (by popular demand). In the meantime, we can add our own.
Here’s how do create simple, attractive buttons in Gutenberg:
- Copy these CSS button styles and classes to easily add shape, shadow and depth
- Add your own brand colors to the default button
- Watch this video for an in-depth tutorial
Use GenerateBlocks Buttons
Generateblocks is as an elegant block-based plugin created by the same team as GeneratePress theme. At its core it’s simple, with just a handful of blocks including:
- Grids
- Buttons
- Containers
- and Headlines
But you get deep styling and layout controls for each of these blocks, including the Generateblocks button block, which is pretty much what the Gutenberg button block should have been all along.
Generateblocks buttons include all the core WP button features like width, border, border-radius and color. But now you get even more control.
Extra button controls with Generateblocks buttons:
- Padding
- Spacing (margin settings are so useful!)
- Font Controls
- Margin
- Hover styles
- Rel=Nofollow, Rel=Sponsored
- Icons (including icon-only buttons)
- Aria labels for accessiblity
- Responsive controls (different settings by screen size)
Oh, and that’s just the free version. Generateblocks Pro adds way more awesomeness. And the button block is just the beginning. Since version 2.0 of Generatepress Premium, you can now use Generateblocks for full-site editing like block-based headers!
While Generateblocks’ controls are probably overkill for most of your buttons, it’s great for creating one-off buttons on sales pages, landing pages, or for a reusable CTA block.
(this button was made with Generateblocks)
Use a Button Plugin (like Maxbuttons)
Maxbuttons has been around forever, and is still one of the most popular button plugins in the WordPress repository. It has both a free and pro version, but with 1000+ five-star reviews, the free version is good enough for most users.
Maxbuttons has several options for creating and inserting buttons:
- Maxbuttons shortcodes
- Maxbuttons button block
Maxbuttons is a no-code button designer, that lets you easily create custom button designs and reuse them throughout your site. But the real value comes in the pro version, which includes dozens of pre-made button packs.
Button packs are groups of buttons which matching styles, design and color scheme so you never have to worry about mismatched buttons again.
Other Options
There are endless other options for creating buttons. You can hand code them with CSS, create your own shortcodes, or use a shortcode-based plugin like Shortcodes Ultimate.
The Generatepress team even provided their own simple CSS, but I don’t recommend this solution as it requires you to manually add the button classes to your HTML code. It’s really only suitable for the classic editor, and Gutenberg blocks have changed WordPress for the better.
More Generatepress Tutorials: