In this tutorial we will learn how to create beautiful gradient backgrounds for buttons. This tutorial will cover:
✔︎ How to add gradient backgrounds to your buttons
✔︎ How to use the location and angle settings for unique effects
✔︎ How to add a gradient background hover effect
✔︎ And much more!
Hey there. It’s Aviva from Elementor. Today I’ll show you how to create striking background gradients for your website buttons in Elementor, without using any code.
The button background gradient functionality in Elementor provides a number of settings, which you can customize to reflect the style of your website.
It’s located in the background section of the button widget, so if you’re not yet familiar with this widget, I recommend you first watch our dedicated button widget tutorial. (info card? Can SImon make a sticker?)
Tutorial
We’ll begin with a simple gradient button. I’ve already dragged a button widget onto this page, added the content, and styled it with a classic, or solid color background. Click the gradient icon to turn the solid color into a gradient. Cool.
Next we’ll cover how to customize each of the individual gradient settings.
Select the first color for the gradient. You can use a custom or preset global color. Now select the second color. Control the transition between the gradient colors by adjusting the location for each color.
The location settings allow you to control how sharp, or subtle, the gradient transition will be.
Next, choose the gradient type. By default, it’s set to linear, but you can also change to a radial gradient. We’ll cover the radial settings in the next example. For this button, I’ll switch it back to linear.
Now adjust the gradient angle. Use the slider to experiment with a range of angles, or type in an exact value for precision.
This button looks great. Now let’s make it more interactive by adding a hover effect.
Click hover and change the background type to gradient.
Set the same color values as before; just tweak the location of the second color. Let’s see it in action.
Looks great!
In the next example, we’ll use a radial gradient background.
I’ve already added a button and set the content and gradient colors. Let’s change the gradient settings to create a different effect, and better suit this design.
First, change the gradient type from linear – to radial. The position setting will now display. Choose from the different options to control the starting position of the radial gradient.
Next, adjust the location of each color, until you get an effect like this.
For the hover style, choose the same settings used in the normal style, and invert the colors.
Nice!
For the final example, we’ll use the gradient background to separate and highlight elements within the button.
Here too, I’ve already added a button and set the content and gradient colors. To separate the icon from the text, adjust the location of each color, and change the angle of the gradient.
Next, click Hover and update the settings there accordingly.
Neat!
And there you have it! You now have the tools to create unique and engaging buttons throughout your site.
So go ahead, play around with the gradient background options…we can’t wait to see what you come up with.
Thanks for watching! For more tutorials, subscribe to our Youtube channel. And don’t forget to hit the notifications bell
