You could settle for flat buttons like I use on my website, but if you’re more funkily inclined, why not add a gradient effect to your website buttons?
Here’s how to do it.
(Please note: the colors I use in this tutorial look gaudy. It’s for illustration purposes only. Don’t follow my example of color usage.)
The setup
To do this you’ll need a few tools and the correct setup. Follow along and you should have your gradient button in no time.
The tools
These are the tools you’ll need to add gradient colors to your headings in WordPress.
- WordPress.
- This is the self-hosted version of WordPress, not wordpress.com.
- Page Builder Framework.
- You don’t need Page Builder Framework per se, but I strongly recommend you get it. It’s a fantastic WordPress theme built to be used with page builders like Elementor and Beaver Builder.
- Elementor.
- You’ll need the free version of Elementor for this tutorial.
- The PAFE Piotnet plugin.
- This plugin enables you to add gradient colors to your headings.
The page
You need to activate Elementor if you’d like to add a gradient button to a post or page.
Read the following post if you’re not sure how to: How to activate Elementor for a post or page.
Once Elementor is active for a page you can add as many gradient buttons to that page as you like.
The plugin
You must install the PAFE Piotnet plugin if you’d like to use this article as a guide for adding a gradient button to a WordPress page.
Read my article about how to install a WordPress plugin if you’re unsure.
The gradient button option must be active too.
Follow these steps to activate the Piotnet plugin’s gradient button functionality…
The result
You can see the gradient button on my test site.
Let’s jump into the gradient button tutorial.
Add a button
Add a linear gradient
Let’s add a linear (straight) gradient effect to our button, along with a hover gradient effect.
Change the angle
A new button comes with a gradient that runs from top to bottom, or 180 degrees.
You can rotate the gradient’s angle in ten degree increments around a 360 axis.
You can leave it as is, but to show off the effect, let’s make the angle 230 degrees.
Change the color
If you’ve set up global colors using Elementor Pro, this step is a breeze.
For the purpose of testing I’ve not set up global colors on my test site, so we’ll change the colors using Elementor’s standard color picker.
Your button’s colors are set. Now let’s change the location.
Change the location
You can choose where one color transitions into the next on the button.
Each color comes with a slider, allowing you to set the hardness of the transition.
The first slider’s default location is 0, while the default location for the second color is 100.
Let’s add a hard transition to clearly show what the gradient looks like.
You can play around with the two sliders to make the transition softer or move it to a different position on the button.
Hover effect
The Piotnet gradient button comes with the ability to change the look of the gradient radically when you hover over the button.
This makes it easy for a website visitor to see that the component they’re hovering over is a clickable element (a button in this case).
Let’s change the colors of the gradient when you hover over the button. In addition, we’ll also make sure the button keeps the same gradient angle and hard gradient when hovered over.
When you hover over the button now, it changes to a 180 degree soft gradient.
We want the button to have a hard gradient and flip at a 230 degree angle.
Remember, you can change the gradient to be smoother. I gave it a hard gradient for illustration purposes.
Add a radial gradient
When you activate the Piotnet gradient button effect it adds a linear gradient by default.
You can also create a radial (round) gradient.
For the purpose of adding a radial gradient I’ve added another button to the test page.
Make sure the new button is active before continuing.
Change the type
This is where you change the gradient from linear to radial.
While we gave the linear gradient a hard transition, we’ll leave the radial gradient soft and change only the hover colors and the position of the gradient on the button.
Change the color
Let’s give the button different colors for it’s non-hover state.
Change the position
Let’s change the position of the gradient so it’s off-center.
Hover effect
Let’s change the colors of the gradient when the button is hovered over. This gives the user a clear indication that the button is meant to do something.
The hover effect now shows a linear gradient effect. Let’s change it.
Let’s change the position of the radial gradient on hover too.
Conclusion
Elementor doesn’t come with the ability to add a gradient button to your website. Not even Elementor Pro has this ability.
That’s why the PAFE Piotnet plugin is such a valuable addition to your Elementor arsenal.
It lets you add a button with a gradient you can change the colors, angle and location of. If you think the linear gradient is boring, switch over to a radial gradient for some additional funk.
Get the PAFE Piotnet plugin for Elementor and start adding gradient buttons to your website.
But it doesn’t just stop at gradient buttons. The PAFE plugin comes with a seriously powerful form builder; probably the most powerful form builder for WordPress. This makes Piotnet a must-have plugin if you’re serious about building amazing WordPress websites using Elementor.