How To Add Gradient Buttons To A WordPress Website

Make your website buttons stand out like Christmas baubles with a gradient effect that changes on hover.

By Joe
WordPress
Elementor, Piotnet
Dec 15, 2020
Dec 31, 2020

Get WordPress tutorials and online marketing tips delivered to your digital door

My articles are FREE to read. But when you buy through my referral links I earn commission. You don't pay more but I get rewarded for my hard work. It's like a salesman in a shop showing you the goods. Thanks for your support. I really appreciate it.

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…

Inside Your WordPress Dashboard, Click On Piotnet Addons In The Sidebar.

Ensure The Gradient Button Option Is Active — Ensure The *Gradient Button* Option Is Active.

The result

You can see the gradient button on my test site.

Let’s jump into the gradient button tutorial.

Add a button

Drag A Button From The Left Hand Sidebar Into The Section That Reads Drag Widget Here — Drag A Button From The Left Hand Sidebar Into The Section That Reads *Drag Widget Here*.

A Button After It Was Dragged Into An Elementor Section — A Button After It Was Dragged Into The Elementor Section.

Add a linear gradient

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 — In The Left Hand Sidebar, Click On The *Style* Tab.

Scroll Down To The Pafe Gradient Button Menu Item — 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 Effect To The Button — The Moment You Enable The Gradient Effect, Piotnet Adds A Default Gradient To The Button.

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.

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.

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.

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.

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.

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.

Activate The Hover State Settings By Clicking The Hover Tab — Activate The Hover State Settings By Clicking The *HOVER* Tab.

Click On The Color Icon For The Top 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.

You Now Have A Button With A Gradient Effect The Color Of Which Changes When You Hover Over The Button — 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.

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.

The Second Button, Ready For A Radial Gradient.

Make sure the new button is active before continuing.

Scroll Down To And Click The Pafe Gradient Button Menu Item — Scroll Down To And Click The PAFE Gradient Button Menu Item.

Just Like With The Linear Gradient, Piotnet Automatically Adds A Default Gradient Effect To The Button — Just Like With The Previous Button, Piotnet Automatically Adds A Default Gradient Effect To The Button.

Change the type

This is where you change the gradient from linear to radial.

Hover Over The Type Dropdown That Reads Linear And Change It 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.

Change the color

Let’s give the button different colors for it’s non-hover state.

Click On The Color Icon For The Top Color.

Change the position

Let’s change the position of the gradient so it’s off-center.

This Moves The First Color To The Top Middle Of The Button.

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.

Click On The Color Icon For The Top Color.

The hover effect now shows a linear gradient effect. Let’s change it.

Hover Over Type And Choose Radial — 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 — 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.

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.

5 1 vote

Article Rating

0 Comments

Inline Feedbacks

View all comments