Menu
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.)
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.
These are the tools you’ll need to add gradient colors to your headings in WordPress.
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.
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…
Inside Your WordPress Dashboard, Click On Piotnet Addons In The Sidebar.
Ensure The Gradient Button Option Is Active.
Let’s jump into the gradient button tutorial.
Drag A Button From The Left Hand Sidebar Into The Section That Reads Drag Widget Here.
A Button After It Was Dragged Into The Elementor Section.
Let’s add a linear (straight) gradient effect to our button, along with a hover gradient effect.
In The Left Hand Sidebar, Click On The Style Tab.
Scroll Down To The PAFE Gradient Button Menu Item and click it.
Enable The Gradient Button Functionality.
The Moment You Enable The Gradient Effect, Piotnet Adds A Default Gradient To The Button.
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.
In The Sidebar, Click The Up Or Down Arrow Under The Angle Setting Until You Reach An Angle Of 230 Degrees.
The Gradient Now Lies At A 230 Degree Angle.
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.
Click On The Color Icon For The Top Color.
Adjust The Slider And Color Picker Or Simply Paste A New Hex Code Into The Box To Change The Color.
Now Adjust The Second Color In The Same Way.
Your button’s colors are set. Now let’s 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.
Set The Location For Both Colors To 50. In This Instance It Causes The Gradient To Have A Hard Transition In The Middle Of The Button.
You can play around with the two sliders to make the transition softer or move it to a different position on the button.
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.
Activate The Hover State Settings By Clicking The HOVER Tab.
Click On The Color Icon For The Top Color.
Adjust The Slider And Color Picker Or Simply Paste A New Hex Code Into The Box To Change The Color.
Adjust The Second Color For The Hover Effect In The Same Way.
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.
Set The Location For Both Colors To 50. This Gives The Hover Effect A Hard Gradient.
Change The Angle To 230.
You Now Have A Button With A Linear Gradient Effect The Color Of Which Changes When You Hover Over The Button.
Click The Update Button to save your work.
Remember, you can change the gradient to be smoother. I gave it a hard gradient for illustration purposes.
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.
The Second Button, Ready For A Radial Gradient.
Make sure the new button is active before continuing.
In The Left Hand Sidebar, Click On The Style Tab.
Scroll Down To And Click The PAFE Gradient Button Menu Item.
Enable The Gradient Button Functionality.
Just Like With The Previous Button, Piotnet Automatically Adds A Default Gradient Effect To The Button.
This is where you change the gradient from linear to radial.
Hover Over The Type Dropdown That Reads Linear And Change It To Radial.
The Gradient Now Switches To Radial, Which Makes It Circular.
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.
Let’s give the button different colors for it’s non-hover state.
Click On The Color Icon For The Top Color.
Adjust The Slider And Color Picker Or Simply Paste A New Hex Code Into The Box To Change The Color.
Now Adjust The Second Color In The Same Way.
Let’s change the position of the gradient so it’s off-center.
Click On The Dropdown For Position And Change The Position To Top Center.
This Moves The First Color To The Top Middle Of The Button.
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.
Activate The Hover State Settings By Clicking The HOVER Tab.
Click On The Color Icon For The Top Color.
Adjust The Slider And Color Picker Or Simply Paste A New Hex Code Into The Box To Change The Color.
Adjust The Second Color For The Hover Effect In The Same Way.
The hover effect now shows a linear gradient effect. Let’s change it.
Hover Over Type And Choose Radial.
Let’s change the position of the radial gradient on hover too.
Hover Over Position And Choose Bottom Center.
You Now Have A Button With A Radial Gradient Effect The Color Of Which Changes When You Hover Over The Button.
Click The Update Button To Save Your Work.
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.
