Buttons might seem like a small thing, but they can do a lot of heavy lifting on your website. Buttons are one of the simplest ways to guide visitors toward the action you want them to take.
From leading people to your product page to prompting them to read more or sign up, a good-looking button can make all the difference. The good news is you don’t need coding skills to design them.
WordPress has built-in options, and with a little help from a block plugin, you can get even more control over how your buttons look and feel.
In this post, I’ll walk you through three easy methods to create stylish buttons in WordPress.
We’ll start with the default editor, move on to a plugin that offers more flexibility, and finish with a bonus method for adding buttons inside tables. Let’s jump in.
Create Beautiful Tables
With Block Editor
✅Method 1: Using the Default Buttons Block
WordPress has a built-in Buttons block that works fine in most cases. You’ll find it inside the block editor when you click the little (+) icon and search for “Buttons.”
When the button block is inserted, it will tell you to add text inside the button.
Once you insert the block, you can add one or multiple buttons side-by-side. Each button can be customized directly from the right sidebar. You’ll find options for:
- Button width (full or auto)
- Text and background color
- Padding and alignment
- Border radius (for rounded corners)
It’s a good starting point, especially if you stick with a minimalist design.⚠️But you’ll quickly hit a limit if you need more styling options like hover effects, gradients, or responsive spacing.
🛠️ Pro Tip: Want a perfectly rounded button? Set the border radius to 100 for a pill-style button.
✅Method 2: Using the Buttons Block by Ultimate Blocks
If you want more control without writing CSS, Ultimate Blocks is a fantastic Gutenberg plugin to try. It adds an enhanced Buttons Block that’s built with customization in mind.
Installing Ultimate Blocks is an easy task.
-
Navigate to Plugins
-
Click Add Plugins
-
Search for “Tableberg”
-
Click Install, then Activate
After installing and activating Ultimate Blocks, add the “Buttons (Ultimate Blocks)” block.
To insert the Buttons of Ultimate Blocks, click the little (+) icon and search for “Button (Improved).”
You’ll immediately notice the difference when you add the Ultimate Blocks button. Here’s what you can tweak in the Block Settings:
-
Button Justification & Orientation
-
Button Size
-
Button Width
-
Icon support (before or after text) with various other options
-
Animation Support